说起来呢, 基本上只要你给容器 div 加了 float 的属性, 就需要清除浮动来使页面显示正常, 那么, 到底有什么方法可以让浮动轻松清除呢?
可以用 display:flex; 替代, 但是它对 IE8,9 支持不是很好, 所以不怎么这么用.
1. 在容器 div 的里面结束标记之前写如下这样的 div 这段代码:
<div style="clear:both"></div>
虽然通俗易懂, 容易掌握, 但是在页面中加入了一个无意义的空标签, 违背了结构和表现分离的 web 标准的精髓, 如果页面空标签多的话, 对于后期的维护会造成一定的困难. 一般来说, 现在已经不采用这种方法.
2. 在浮动容器 div 的 CSS 样式中加入 overflow 属性.
3. 将父元素也变成浮动元素, 但是影响整个页面的布局, 不推荐使用.
4. 使用: after 伪元素, 一般增加 clearfix 的 class, 大概写法如下:
- .clearfix:after{
- content:".";/* 加一段内容 */
- display:block;/* 让生成的元素以块级元素显示, 占满剩余空间 */
- height:0;/* 避免生成的内容破坏原有布局高度 */
- clear:both;/* 清除浮动 */
- visibility:hidden;/* 让生成的内容不可见 */
- }
- .clearfix{zoom:1;/* 为 IE6,7 的兼容性设置 */}
除了 clear:both; 是为了清除浮动以外, 其他的属性就是为了隐藏这个元素, 所以我们对它进行了改进一下:
- .clearfix:after,.clearfix:before{
- content:".";/* 加一段内容 */
- display:table;/* 创建匿名的表格单元, 触发 bfc*/
- }
- .clearfix:after{
- clear:both;/* 清除浮动 */
- }
- .clearfix{zoom:1;/* 为 IE6,7 的兼容性设置 */}
.clearfix:before, 加上 before, 对清除浮动没什么作用, 防止浏览器顶部空白崩溃, 也就是说, margin-top 和上一个盒子的 margin-bottom 它们会发生一个叠加, 这么做就是防止叠加, 其实没有这个需要, 去掉 before 也没啥问题.
原理和第一种方法差不多, 就是用 clear:both;
使用的原理基本上就是触动 bfc,
bfc:block formating contexts 块级格式化上下文
比如下面这些就是:
- float:left;
- overflow:auto;
- display:table-cell;
- display:table-caption;
- display:inline-block;
- position:fixed;
- position:absolute;
目前就是用最后的一种方式来进行清除浮动, 毕竟优雅~~~
来源: http://www.bubuko.com/infodetail-2596351.html