我们在平常做项目的时候,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: ''; // 内容为空字符是为了不影响本来的domdisplay: 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方案。