::after::before清除浮動原理 - pssp－IT工程師數位筆記本

文章出處

先來看一段代碼

<!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，使這個盒子和其他的盒子隔離開，使其父元素的高能夠自適應子盒子的高。

文章列表