最近重温了CSS相关的一些内容，很多当时不理解的内容，到现在逐渐理解了一些。
干脆对清除浮动的方法做一个总结，便于自己今后遗忘再寻找，在这里也提供一个参考。
目录
为何要清除浮动
本质与策略
清除浮动的核心
清除浮动的方法
1. 额外标签法
2.给父元素添加 overflow 样式
3.给父元素添加伪元素/4.给父元素添加双伪元素
为何要清除浮动
由于浮动不占有文档流本身的位置，在父元素不设置高度的情况下，父元素内的子元素如果浮动，会引起父元素的高度塌陷(父元素无高度，高度为0)，高度塌陷不利于父元素本身的展开，也不利于父元素后续同级元素的设置，因此需要清除浮动。
本质与策略
清除浮动的本质就是清除浮动元素脱离标准流造成的影响。
清除浮动的策略就是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子以外的其他元素。
清除浮动的核心
清除浮动的核心就是CSS中的 clear 样式，通常有三种 left，right，both，一般只用 both。
由于这个样式的存在，于是出现了 4 种方法用来清除浮动，虽然黑马的 pink 老师将其归为 4 种方法，但是根据闭合的方式来说其实就只有两种。第三种和第四种都是第一种的高级延伸。在后面 3/4 方法的时候我会进行总结。
清除浮动的方法
首先，举个高度塌陷的例子。
CSS样式
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.one,
.two {
width: 200px;
height: 200px;
}
.one {
float: left;
background-color: pink;
}
.two {
float: left;
background-color: skyblue;
}
HTML
高度塌陷效果图（父元素盒子高度为0，没有被撑开）
使用后面方法清除浮动后的效果图（父盒子被子元素自然撑开，有高度）
1. 额外标签法
W3C 对 clear: both 最推崇的方法。其用法为，在父元素的最后一个浮动的子元素后面再添加一个元素，设置 clear: both 样式，用于清除浮动带来的影响。
缺点：非常影响HTML文档结构。
注意：这个应用 clear: both 的元素，需要是携带 clear: both 样式的块级元素。并且在父元素的最后一个浮动的子元素的后面。
具体用法
CSS样式
.clear {
clear: both;
}
HTML
2.给父元素添加 overflow 样式
这个比较简单，同时也可以解决 margin 上下边距塌陷的问题。
缺点：overflow 真正的用法是针对溢出的，如果文档内有需要溢出盒子进行显示的情况，会导致溢出部分无法正常显示。
CSS样式
.box {
overflow: hidden;
width: 800px;
border: 1px solid blue;
}
3.给父元素添加伪元素/4.给父元素添加双伪元素
两个放在一起讲，差不多大同小异。
单伪元素就是只用 after，双伪元素就是加一个 before。
代码如下，解释放在代码后。
.clearfix:after,
.clearfix:before {
/* 给元素添加内容 */
content: '';
/* 设置元素为块级元素 */
display: block;
/* height: 0; */
/* font-size:0; */
/* 清除浮动属性 */
clear: both;
/* visibility: hidden; */
}
:after 与 :before 为伪类选择器。
:after 的含义为在元素内部之后创建一个行内元素。
:before 的含义则为在元素内部之前创建一个行内元素。
content 的意思是在元素中创建一个文本为空的内容，此行为伪元素必写行，否则不会生成。
display: block 则是将元素显示模式修改为块级元素。
clear: both 是清除左右所有浮动。
其他的注释样式则是为了让元素不会由于意外原因在文档内显示。
核心代码其实就是
.clearfix:after,
.clearfix:before {
content: '';
display: block;
clear: both;
}
该样式的意思就是：在拥有该类的元素内部之前和之后各生成一个带有 clear:both 的块级元素。总的来说，这就相当于额外标签法的升级优化版本。既没有影响文档结构，也没有产生其他的额外影响。日常使用一般都是用最后的这种方法。
最后一个小贴士，:after 和 ::after 没有差别，一种是 CSS2 的写法，一种是 CSS3 的写法，前者兼容性可能更好。
另外，如果还要针对 IE6 和 IE7 这种浏览器考虑兼容性的话，还需要加上下面这行 CSS 代码。
.clearfix{
*zoom: 1;
}
推荐阅读
您阅读本篇文章共花了：
发表评论