float学习笔记_html/css_WEB-ITnose

float 系统学习

• float的原本作用是产生文字环绕效果
• float可以产生包裹、隔绝的效果（ BFC）、破坏性

其他具有包裹性质的属性

display ： inline-block table-cellposition: absolute/fixed/sticky???overflow: hidden/scroll

什么是破坏性

父元素的高度塌陷

其他具有破坏性的属性

display: noneposition: absolute/fixed/sticky

清除浮动(放在浮动元素的父元素上)

• clear
• bfc

clearfix的代码

.clearfix:after {    content: '';    display: block;    height: 0,    overflow: hidden;    clea    r: both;}.clearfix {     *zoom:1}/*兼容IE6、7*//****************方式二*******************/.clearfix:after {    content: '';    display: table;    clear: both;}.clearfix {    zoom:1;}

BFC

float: left/rightposition: absolute/fixedoverflow: hidden/scrolldisplay: inline-block/tabel-cellwidth/height/zoom:1(*IE6/IE7*)

浮动可以用来去除元素之间的空格

‘ ’;的空格可能会对布局造成影响因为‘‘‘ ’;当做普通文本来显示了

浮动与流体布局

？？？高端的

float

display: inline-block