css 如何清除浮動帶來的影響

高度塌陷怎麼辦?

當咱們用一個div(就叫大盒子吧) 取包裹其餘盒子(小盒子)的時候,小盒子所有設置了浮動float, 從咱們平常認知當中:小盒子從大盒子中拿出來,那麼大盒子知識內容部分(content)空了並不影響到什麼. 可是在這裏會形成高度塌陷, 父元素的高度會消失

.parent{
            background-color: #ccc;
        }
        .box01{
            width:100px;
            height:50px;
            background-color:pink;
            float:left;
        }
        .box02{
            width:200px;
            height:100px;
            background-color:lightblue;
            float:left;
        }
        .box03{
            width:300px;
            height:150px;
            background-color:yellow;
            float:left;
        }

<div class="parent">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
    </div>

浮動前

浮動後

上面兩組圖是懸浮先後的對比,懸浮後父元素(大盒子)因爲沒有內容的支撐,形成了高度塌陷(height:0;)

那麼如何解決的這個高度塌陷的問題呢?

1. 這是個笨辦法, 給父元素設置個固定的高度,這樣就不會形成塌陷,可是這個弊端也很明顯, 父元素的高度不能隨子元素改變.
2. 給父元素添加樣式overflow:hidden; 這樣父元素的高度會隨內部子元素的改變作出相應的變化.一樣也是有弊端的(overflow溢出, hidden 隱藏)字面意思超出父元素的部分會被隱藏起來,形成一些顯示上的問題.
3. 還能夠直接給父元素設置浮動,可是會對後續的元素形成影響,就像上篇文章說的那樣,前面元素的懸浮,會形成後面元素跑到前面元素的下面,形成內容覆蓋.
4. 還有一個比較高大上的方法能夠清除浮動,eg.僞元素的使用.

僞元素:after用的最多的地方就是清除浮動,這樣不會給結構上添加負擔,並且不會影響佈局
例如

.parents::after{
    content:""; /*注意:這裏必定要寫 即便沒有要寫的內容也要有.*/
    clear:both; /*清除兩邊的元素*/
    display:block;/*僞元素行內的特性*/
    
}

後面還會持續更新...