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*)
浮动可以用来去除元素之间的空格
‘ ’;的空格可能会对布局造成影响因为‘‘‘ ’;当做普通文本来显示了
浮动与流体布局
???高端的
float
display: inline-block