关于清除浮动的方法

如题所述

第1个回答  2022-07-26

刚学习了浮动,这里整理一下清除浮动的方法。

伪元素清除浮动是伪元素的用途之一,这是清除浮动的一个相对比较好的方法,可以减少无意义的标签,使得html尽量简单。可以在浮动元素的容器内增加一个class类,比如说取名为clearfix。然后在clearfix里面添加一个伪元素,只能用after,利用这个看不见的元素来清除浮动。这里要注意的一点伪元素生成的默认是行内元素,而是clear的对象一定是块级元素,否则不起作用,所以要设置一下display属性。

在伪元素里面设置display属性为table,也是比较优越的方法。

不用伪元素,直接在父容器里面 display: table; 来模拟表格布局,也可以清除浮动,并且实现自动对齐。当然表格元素也会有它的弊端。

给浮动元素的父容器添加 overflow:hidden; 或 overflow:auto; 或者 overflow: scroll; ,也可以清除浮动。

在浮动的元素后面(同一层级),增加一个新标签,比如: <div class="clear"></div> ,然后在这个空元素里面设置 clear: both 清除浮动。当然这样的话,就会增加无用的标签,使得html变得冗余。

给浮动元素的父容器也设置浮动,也能达到清除浮动的效果。但它会给下面的元素带来布局的影响。

当浮动元素 同一层级 的后面还有元素的时候,可以给后面的元素设置清除浮动,来达到为上面的元素清除浮动的效果。

给父容器设置 display: inline-block 之后,容器就可以形成BFC,这样就会有独立的渲染空间,就算有浮动元素也会把容器撑开。

总结:

相似回答
大家正在搜