刚学习了浮动,这里整理一下清除浮动的方法。
伪元素清除浮动是伪元素的用途之一,这是清除浮动的一个相对比较好的方法,可以减少无意义的标签,使得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,这样就会有独立的渲染空间,就算有浮动元素也会把容器撑开。
总结:
首先,我们制作一个简单的html页面。父级元素是div,内部元素,是两个ul,两个ul分别是左浮动。并且为父级元素添加边框。
2/7
我们可以发现,父级元素根本没有被子元素的高度所撑开,而是只保持了h标签的高度,这就是浮动,导致的。
3/7
清除浮动,顾名思义就是clear:both,这的确是一种方法,但是要确定我们的clear:both是应用在哪里。
4/7
我们可以在html页面上,最后一个浮动元素的后面,添加一个div,并设置其style为clear:both。
5/7
我们还可以为浮动的元素的父级元素添加伪类,*::after{content""display:blockclear:both},这样将会使得浮动止于此
6/7
除了这些,我们还可以为父级元素添加overflow属性,可以设为hidden,也可以设为auto
7/7
以上三种方法是小渔自己通过亲身经历,总结而来的哦。正确的页面显示效果如图所示