清除浮动

浮动

float的设计初衷仅仅是文字环绕效果

float具有包裹性和破坏性。

设置了浮动的元素会脱离正常的文档流，我们可以理解成：设置浮动后，元素不仅在y轴上浮了起来，在z轴上也浮了起来。

具有包裹性的其他属性

• display : inline-block / table-cell / ..
• position : absolute / fixed / sticky
• overflow : hidden / scroll

破坏性的表现形式为，浮动元素的父级元素高度塌陷

具有破坏性的其他属性

• display : none
• position : absolute / fixed / sticky

清除浮动：触发 BFC 就能清楚浮动

清除浮动的方法：

1. 在所有浮动元素后面加一个空标签，并设置 clear:both 。缺点：添加多余元素。
2. 在浮动元素的父级元素设置 float:left/right 。缺点：不科学。
3. 对浮动的父级元素设置 overflow:hidden/auto 。
4. 对浮动的父级元素设置 display:table-cell/table-caption/inline-block。
5. 对浮动的父级元素设置 position:fixed/absolute。
6. 对浮动的父级元素设置 zoom : 1。
7. 浮动元素的父级元素添加 class=:"clearfix"。

BFC 方法的不足是 不可能使每个元素都浮动或者绝对定位。zoom:1 只有 IE6，IE7 能识别。

权衡过后的清除浮动的方法：

.clearfix:after{
    content : "";
    display : block;
    height : 0;
    overflow : hidden;
    clear : both;
}
.clearfix{
    *zoom : 1;
}

更简洁的方法：

.clearfix:after,
.clearfix:before{
    content : "";
    display : table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}

.clear:before 的作用是避免 margin 叠加

切勿滥用float

过多的 laslayout 会让 IE6/IE7 出现很多异常

浮动隐藏的表现

1. 元素 block 块状化
2. 破坏性造成的紧密排列特性（去空格化）；

浮动的缺点：

• 容错性不好，容易出问题
• 这种布局需要元素固定尺寸，很难重复使用
• 在低版本的 IE 下会有很多问题。

浮动和流体布局

单侧固定：

width+float + padding-left/margin-left

padding/margin 的值伪图片至边缘的距离值

只能自适应尺寸

float + display : table-cell //IE8 + display : inline-block //IE7

IE 7 的浮动问题

1. 含 clear 的浮动元素包裹不正确
2. 浮动元素倒数 2 个莫名垂直间距
3. 浮动元素最后一个字符重复
4. 浮动元素楼梯排列
5. 浮动元素和文本不在同一行

参考慕课网视频