::after::before清除浮动原理

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

先来看一段代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        h1{

            float:left;

            width:200px;

            height:200px;

            background-color:#ccc;

        }

        span{

            display:block;

            clear:both;

        }

        p{

            width:300px;

            height:300px;

            background-color:#f1f1f1;

        }

    </style>

</head>

<body>

    <div>

        <h1>我是h1</h1>

        <span></span>

    </div>

    <p>我是p</p>

</body>

</html>

在早期我们通过在div标签中添加了一个空的span标签，并且给这个空的span清除浮动。但是这样的话就需要每次都添加一个空的标签，所以一些前辈就想出来用::after::before来清除浮动，从效果上来看，after和before也是一个标签，所以我们就可以利用这个伪元素来清除浮动，从根本上来说它和加一个span标签来清除浮动是一样的。

这个例子的问题就是，如果父盒子没有给高度，但是里面的子元素浮动了，或者绝对定位，固定地位，都会使这个子元素脱离文档流，使父元素不能够获取到子元素的高，也就是不能自适应子元素的高了，既然不能自适应子元素的高了，那么父元素的高就是0，既然是0那么后面的元素自然就跑上来了。

其实最重要的不是after和before，而是浮动的元素找浮动的元素，你通过一个没有浮动的元素将它们隔离开了。

我以前一直不太明白为什么可以直接用clear来清除浮动，还要给这个元素加个空标签，其实是因为虽然你可以清除它上面的浮动，但是它上面的那个盒子的高度还是0。通过给大盒子里面添加元素清除浮动的话，就会触动BFC，使这个盒子和其他的盒子隔离开，使其父元素的高能够自适应子盒子的高。