清除浮动

清除浮动

语法

在CSS中，clear属性用于清除浮动，基本语法如下：

选择器 { clear : 属性值 }

属性值	描述
left	清除左侧浮动
right	清除右侧浮动
both	清除左右两侧的浮动

用法

1. 额外标签法

示例：

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

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

---

2. 给父级添加overflow属性方法
   可以通过触发BFC的方式，可以实现清除浮动效果

示例：

可以给父级添加： overflow : hidden | auto | scroll

优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏

---

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

示例：

 /*使用after伪元素清除浮动*/
.clearfix::after{
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}

/*IE6 IE7专有*/
.clearfix{
	*zoom: 1;
}

优点：符合闭合浮动思想，结构语义化正确
缺点：IE6.7不支持after

---

4. 双伪元素清除浮动(推荐使用)

示例：

 /*双伪元素清除浮动*/
.clearfix:before,.clearfix:after{
	content: ".";
	display: table;
}

.clearfix:after{
	clear: both;
}

.clearfix{
	*zoom: 1;
}