float学习笔记

float 系统学习

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

其他具有包裹性质的属性

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

什么是破坏性

父元素的高度塌陷

其他具有破坏性的属性

display: none
position: 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/right
position: absolute/fixed
overflow: hidden/scroll
display: inline-block/tabel-cell
width/height/zoom:1(*IE6/IE7*)

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

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

浮动与流体布局

？？？高端的

float

display: inline-block