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