说起来呢,基本上只要你给容器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;
目前就是用最后的一种方式来进行清除浮动,毕竟优雅~~~
原文地址:https://blog.csdn.net/u012396955/article/details/60341523
原文地址:https://www.cnblogs.com/liyouwu/p/9024167.html