清除浮动的几种常用方法(2)

上一篇文章中介绍了一些常用的清除浮动的方法,这篇文章会继续给大家分享一些常用的清除浮动的方法,望大神赐教。

方法一:增加
标签

这种方法比较小众,基本上很少使用,通过在父级元素后面加一
即可以清除浮动,但是额外增加了一些无用的标签,有违结构与表现分离,所以不是很提倡大家使用的。

方法二:使父级也浮动

使的与父级相邻的都会受到影响,所以也不推荐大家使用。

    方法三:使用:after 伪元素

.box:after{
              clear: both;
              display: block;
              height: 0;
              content: "\0020";
          }

我个人是比较喜欢这种方法来闭合浮动的,但是也有自己的缺点,有时候随着工程代码量的增加,这种方法会使得代码量增加。

小结
通过对比,我们不难发现,其实以上列举的方法,无非有两类:
其一,通过在浮动元素的末尾添加一个空元素,设置 clear:both属性,after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素;

           其二,通过设置父元素 的属性,是其触发BFC。

           

你可能感兴趣的:(清除浮动的几种常用方法(2))