CSS 清除浮动
区块元素如果没有指定高度，则高度默认为 auto，意味着该元素的高度会随着子元素所占据文档的空间而自动撑开。如果没有子元素，则该元素的高度为 0。如果该元素有子元素，但是所有子元素都进行了浮动，则该元素的高度也为 0。这是因为浮动意味着脱离文档流，也就是浮动的元素不会再占用文档的空间，因此如果一个元素的所有子元素都进行了浮动，则该元素的子元素所占用的空间为 0，因此该元素的高度为 0。
<div class="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
.container {
border: 1px solid red;
}
.item {
float: left;
width: 200px;
height: 200px;
background-color: #f60;
}
但是大部分情况下，我们不希望得到这种效果，我们希望不管子元素是否浮动，外层元素的高度都会撑起来，就像下图所示这样。
通过以下几种情况，可以让外层元素的高度自动撑起来。
1. 为外层元素设置高度
<div class="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
.container {
height: 200px;
border: 1px solid red;
}
.item {
float: left;
width: 200px;
height: 200px;
background-color: #f60;
}
2. 添加一个空的子元素来清除浮动
<div class="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="clearfix"></div>
</div>
.container {
border: 1px solid red;
}
.item {
float: left;
width: 200px;
height: 200px;
background-color: #f60;
}
.clearfix {
clear: both;
}
3. 添加伪元素来清除浮动
<div class="container clearfix">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
.container {
border: 1px solid red;
}
.item {
float: left;
width: 200px;
height: 200px;
background-color: #f60;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
顺便说一下，伪类和伪元素的区别，伪类的格式：选择器:伪类，例如 li:first-child，a:hover。伪类添加的 CSS 规则仍然作用在选择器所代表的元素上，只不过只有在某种状态下，才会命中该选择器，例如 a:hover，只有在鼠标悬停在 <a> 标签上，才命中选择器。伪元素的格式：选择器::伪元素，例如 p::first-line，div::before。伪元素添加的 CSS 规则不是作用在选择器代表的元素上，而是作用在选择器代表的元素的某个抽象的子元素上，例如 p::first-line，会把段落的第一行抽象成 <p> 的子元素，然后把 CSS 规则应用在该子元素上。但是在使用伪元素时，所有的浏览器都可以使用一个冒号的形式 选择器:伪元素，但是这样是不规范的。
选择器::before 伪元素和 选择器::after 伪元素，会在选择器代表的元素中抽象出一个子元素，该子元素为该选择器代表的元素的 first-child 或 last-child，该子元素的内容由 content 属性指定。
4. 将外层元素设置为 BFC
BFC 可以包含浮动，还可以阻止垂直外边距（margin-top、margin-bottom）折叠。
只要元素满足下面任一条件即可触发 BFC 特性
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
<div class="container clearfix">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
.container {
border: 1px solid red;
}
.item {
float: left;
width: 200px;
height: 200px;
background-color: #f60;
}
.clearfix {
/* 这里也可以采取其他方式将容器变为 BFC，只不过 overflow: hidden 对其它元素的影响最小。 */
overflow: hidden;
}
最佳方案
以下这种清除浮动的方式可以适用于各种浏览器，包括老版本的 IE 浏览器，并且对容器元素和其他元素的影响最小。
<div class="container clearfix">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
.container {
overflow: hidden;
border: 1px solid red;
}
.item {
float: left;
width: 200px;
height: 200px;
background-color: #f60;
}
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
下面是 SASS 代码写的清除浮动的 mixin。
@mixin clearfix {
*zoom: 1;
&::after {
content: '';
display: table;
clear: both;
}
}
.container {
border: 1px solid red;
@include clearfix;
}
.item {
float: left;
width: 200px;
height: 200px;
background-color: #f60;
}
