第九篇 CSS-06
2017-05-19 本文已影响0人
ss555566
- float，属性值有left、right、none（默认）
- 什么是浮动：所谓浮动就是将元素从标准文档流中抽离出来，在浮动流中按照新的排列规则进行排列
a) 标准文档流：也称为标准流，就是指元素的默认的排列规则
b) 浮动流：所谓浮动流就是指元素设置了float属性后，该元素会被从标准流中抽离出来，在标准流的上面新建一个层，在这个层中都按照在一行显示的原则进行排列，这种排列规则就是浮动流 - 元素浮动所带来的影响
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 - 浮动的利用
a) 布局
b) 网页各模块的制作
