第九篇 CSS-06

  1. float,属性值有left、right、none(默认)
  2. 什么是浮动:所谓浮动就是将元素从标准文档流中抽离出来,在浮动流中按照新的排列规则进行排列
    a) 标准文档流:也称为标准流,就是指元素的默认的排列规则
    b) 浮动流:所谓浮动流就是指元素设置了float属性后,该元素会被从标准流中抽离出来,在标准流的上面新建一个层,在这个层中都按照在一行显示的原则进行排列,这种排列规则就是浮动流
  3. 元素浮动所带来的影响
    a) 元素脱离标准流后,它原有的位置会丢失,标准流中的其它元素会占据浮动元素在标准流中的原有位置
    b) 在浮动流中所有元素都是在一行显示的,但是如果空间不够的话浮动的元素会自动换行
    c) 浮动的元素自动变成块元素
    d) 浮动的元素宽度为最小宽度,为了方便控制,通常给浮动元素加width
    e) 浮动的元素脱离标准流后,标准流中的元素会占据它的位置,但是标准流中的文本会对浮动元素形成环绕效果
    f) 两个元素上下间的距离,默认是用较大的margin值,但是如果这两个元素有浮动,那么两个元素上下间的距离采用求和算法
    g) 元素在浮动时会分析前面元素的类型,如果前面的元素是块元素,那么浮动后浮动的元素在块元素下面显示
    h) 如果元素都向右浮动,那么元素的显示顺序为倒叙(即通过浮动可以改变元素的显示顺序),元素都向右浮动的情况并不多见
    i) 如果一个元素中的所有子元素都浮动了,那么父元素高度会塌陷为0,父元素如果有背景色,那么此时背景色不会显示,且会影响其它元素,(如主体左右列浮动后,页脚会跑到主体下面),处理塌陷的方法
     给父元素设置高度
     使用clear属性,该属性具有清除浮动的作用,属性值有left、right、both、none(默认),使用方法是:在父元素中加一个空标签,如div,设置该div的样式为clear:both
    left:清除左侧浮动(就是左侧没有浮动元素)
    right:清除右侧浮动(就是右侧没有浮动元素,基本不使)
    both:清除两侧浮动(就是让设置了clear属性的元素两侧没有浮动元素,使用最为频繁)
     使用:after选择器,在父元素后面添加一个空的内容,然后使用clear:both清除浮动,格式为:父元素:after{content:””;display:block;clear:both},注意如果父元素没有固定宽度,那么该方法IE6/5并不支持,解决的方法在父元素上面zoom:1
     给父元素加overflow:hidden、auto,注意如果父元素没有固定宽度,那么该方法IE6/5并不支持,解决的方法在父元素上面zoom:1
  4. 浮动的利用
    a) 布局
    b) 网页各模块的制作
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,805评论 0 6
  • 1. 居中不定高div样式 参考:http://www.haorooms.com/post/css_div_juz...
    darr250阅读 4,635评论 0 7
  • CSS中的float属性简介 几乎所有会WEB前端开发的同学都知道CSS中有一个float属性用于实现HTML元素...
    欧阳大哥2013阅读 2,776评论 5 26
  • 一、iOS内部对不同事件的处理 iOS中对不同事件作出响应时,会用不同的方式来处理这些业务逻辑。比如按钮的点击使用...
    CoderDancer阅读 4,612评论 2 9