css清除浮動的原理介紹-css教學-PHP中文網

css清除浮動的原理介紹

王林

發布： 2020-07-18 17:31:11

轉載

2472 人瀏覽過

css清除浮動的原理介紹

首先我們要知道clear:both是清除浮動的關鍵。

（建議教學：css快速入門）

clear是CSS中的定位屬性，規定元素的哪一側不允許其他浮動元素。那麼clear:both就是規定在左右兩側均不允許浮動元素。

clear屬性只能在區塊級元素上其作用，這就是清除浮動樣式中display:block的作用。

另外visibility: hidden;height: 0;只要content的值為空，寫不寫都無所謂。

那麼為什麼要清除浮動，最常見的是因為外層容器高度坍塌，程式碼示範：

<style>
.wrap {
    width: 200px;
    border: 1px solid #333;
}
.wrap:after {
    content: &#39;&#39;;
    display: block;
    clear: both;
}
.left {
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.right {
    float: left;
    background: red;
    height: 50px;
    width: 100px;
}
</style>
<body>
    <div class=&#39;wrap&#39;>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

登入後複製

為了顯示清楚一點，在.wrap:after 樣式中的content設定為content : 'after偽元素' ,此時如下圖所示。

css清除浮動的原理介紹