css清浮动
我们在平常做项目的时候，float这个css属性经常会用到。元素浮动会让元素脱离文档流，从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。
什么是浮动
浮动元素脱离文档流并且向左或者向右移动，直到浮动元素的边缘碰到父级框或者另一个浮动元素的边框为止。
浮动的影响
浮动元素会使得父级元素高度塌陷
html:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
css:
* { // 实际项目中不要用通配符*去设置样式
margin: 0;
padding: 0;
}
ul {
border: 10px solid red;
}
li {
width: 100px;
height: 100px;
margin-left: 10px;
list-style: none;
background: orange;
float: left;
}
效果图：
由于浮动元素脱离文档流，不再占据原来的文档流空间，不能撑开父级的内容，所以父级的高度就不存在了。
下面我们将介绍清浮动的两个大类。
清浮动的方法
clear清浮动（clearfix方案）
在css中专门有一个来解决高度塌陷的属性，那就是我们常用的clear属性。clear的用法如下：
clear: none | right | left | both | inherit;
下面对clear值的解释来之w3c
- none：默认值。允许浮动元素出现在两侧。
- right：在右侧不允许浮动元素。
- left：在左侧不允许浮动元素。
- both：在左右两侧均不允许浮动元素。
- inherit：规定应该从父元素继承 clear 属性的值。
我们清除浮动的时候常用clear: both;，注意： clear属性只对块级元素起作用。
下面展示一个与clear值为both有关的例子。
html:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
css:
* {
margin: 0;
padding: 0;
}
li {
width: 100px;
height: 100px;
margin-left: 10px;
list-style: none;
background: orange;
float: left;
margin-bottom: 10px;
}
li:nth-child(3) {
clear: both;
}
上面代码所渲染出来的效果是下面的图：
不知道当大家看到这个结果的时候，是不是开始怀疑w3c中的解释了。实际上clear值为both指的是让自身和前面的浮动元素不相邻。没错，是前面的，并不是前面后面都兼顾，所以上面的例子中展示的效果是两列而不是三列。
下面展示使用clear清浮动，接着最开始的代码，我们对其进行清浮动。(注意下面只展示在最开始代码中增加的代码)
css:
ul {
zoom: 1; // 为了兼容IE6/7
}
ul:after { // 内联
content: ''; // 内容为空字符是为了不影响本来的dom
display: block; // 这里的值也可以是table | list-item，只要能够让伪类成为块级元素。
clear: both;
}
效果图：
BFC清浮动
BFC的全称block formatting context，中文意思是“块级格式化上下文”。
BFC特性
“css世界的结界”（引自张鑫旭的《css世界》），在这个结界中内部子元素不管如何变化都不会对外部的元素有影响。BFC元素的margin不会发生折叠，因为margin折叠影响外部元素的布局。清除浮动，如果BFC不能够清除浮动，那么BFC元素高度就会塌陷，那么内部的元素就会影响到其他的元素的布局，这跟前面说的BFC元素内部的子元素不会影响外部元素相违背。
BFC的实现：（引自张鑫旭的《css世界》）
- 根元素
- float的值非none
- overflow的值为auto、scroll、hidden
- display的值为table-cell、table-caption和inline-block
- position的值不为relative和static
css:
ul {
overflow: auto; // 使浮动元素的父级成为BFC就行可以实现清浮动
}
效果如下图：
大家有可能会有疑问只要一句话实现BFC，那为什么我们还要用上面的clearfix方案？
overflow: auto;不支持IE6/7。overflow: hidden;不支持IE6，使用这个属性容器外的元素可能被隐藏。
但是，大家想下现在使用IE6/7/8的用户还有好多。我个人觉得现在我们没必要去管IE6/7/8，抛弃那部分用户对于我们的影响微不足道。上面这段话只是个人想法，并没有想过让他人必须这样想，如果大家对这段有什么不满请轻喷。
最后建议大家不要一味的使用clearfix方案。