CSS清除浮动大总结（十四）

清除浮动

1.1 为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为O，就影响了下面的标准流盒子。

1.2 清除浮动的方法

• 语法：

  选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动（清除左侧浮动）
right	不允许右侧有浮动（清除右侧浮动）
both	同时清楚两侧浮动的影响

1）.额外标签法

<div style="clear:both"></div>

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化差

2）.父级添加overflow属性

overflow为hidden|auto|scroll都可

• 优点：代码简介
• 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3）.使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加单签了

使用发法：

.clearfix:after {
	content: ""; 
	display: block;
	height: 0; 
	clear: both;
	visibility: hidden;
 }
.clearfix {*zoom: 1;}/*IE6、7专有*/

• 优点：符合闭合浮动思想结构语义化正确
• 缺点：由于IE6-7不支持:after，使用zoom:1触发hasLayout
• 代表的网站：百度、网易等

4）.使用双伪元素清除浮动

使用方法：

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

• 优点：代码更简洁
• 缺点：由于IE6-7不支持:after，使用zoom:1触发hasLayout
• 代表网站：小米、腾讯等

清除浮动总结：

1、父级没高度

2、子盒子浮动了

3、影响下面布局了，我们就应该清除浮动了

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方更加方便	添加许多无意义的标签，结构性差
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after,兼容问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after,兼容问题