CSS實現清除浮動問題的

來源:互聯網
上載者:User


首先,我們要思考一個問題:為什麼要清除浮動呢?在我做小demo的時候,碰到一個問題,當子項目浮動的時候,父元素的背景顏色消失了?可以說,以當時我的菜鳥水平,是不知道為什麼父元素的背景顏色為什麼會不見,我明明設定了背景顏色的,難道顏色格式不對?或者是瀏覽器不相容,是個css hack????????所有的猜測都指向了背景顏色,都是背景顏色的錯。

為什麼要清除浮動?

在坑中不斷掙紮的我,得到了答案,不是背景顏色的錯。而是它的子項目。當子項目浮動的時候會導致父元素的height變為0,這是為什麼呢?

  原因是父元素沒有設定高度,原本的高度,是由子項目撐起來的。當子項目浮動的時候,子項目是脫離文檔流的,而父元素還是文檔流裡,這個時候,父元素的content沒有東西,所以父元素的height就變為原本沒有設定的高度(為0)。如果父元素的content中有非float的元素,則以這些元素的最高的高度撐起父元素的高度。:

HTML代碼

<p>        <img src="./2.png" alt="">        <img src="./1.png" alt="">        <img src="./1.png" alt=""></p>

在沒有浮動時的情況:

HTML代碼

<p>        //此時大圖片左浮動,及的效果        <img src="./2.png" alt="" style = "float: left;">        <img src="./1.png" alt="">        <img src="./1.png" alt=""></p>

在浮動時的情況:(大圖片float:left;小圖片不變)


  

可以從上面的分析得出。子項目浮動,會導致父元素出現“高度塌陷”。

如何清除浮動?

清除浮動的方式有很多種,目前看到有八種左右的清除浮動的方式。但真正用到項目裡,最常見的方式有兩種:
    1.添加偽類:after;
    2.觸發BFC;         

1.添加偽類:after

  給父元素添加一個類clearfix,並給這個類設定偽類:after。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .clearfix:after {            content: " ";            display: block;            clear: both;        }        .a {            float: left;        }    </style></head><body>    <p class="container clearfix">        <img src="./2.png" alt="">        <img src="./1.png" alt="">        <img src="./1.png" alt="">    </p>  </body>  </html>

看吧!這就是第一種清除浮動的方法。也是廣受歡迎的一種清除浮動個方式。


2.觸發BFC

1)什麼是BFC?
  BFC(Block Formatting Context)是Web頁面中盒模型布局的CSS渲染模式。它的定位體系屬於常規文檔流。摘自W3C:

  浮動,絕對位置元素,inline-blocks, table-cells, table-captions,和overflow的值不為visible的元素,(除了這個值已經被傳到了視口的時候)將建立一個新的塊級格式化上下文。

  上面的引述幾乎總結了一個BFC是怎樣形成的。但是讓我們以另一種方式來重新定義以便能更好的去理解。一個BFC是一個HTML盒子並且至少滿足下列條件中的任何一個:

float的值不為none

position的值不為static或者relative

display的值為 table-cell, table-caption, inline-block, flex, 或者
inline-flex中的其中一個

overflow的值不為visible

2) 如何用BFC清除浮動

  粗暴的總結就是讓浮動塊包含在同一個BFC中加同時(也可以理解為包含塊加屬性overflow:hidden)。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .container {            overflow: hidden;        }        .a {            float: left;        }    </style></head><body>    <p>        <img src="./2.png" alt="">        <img src="./1.png" alt="">        <img src="./1.png" alt="">    </p>   </body>   </html>

有利也有弊,下面簡單指出BFC的缺點:
- display:table可能會產生一些問題
- overflow:scroll可能會顯示不必要的捲軸
- float:left將會把元素置於容器的左邊,其他元素環繞著它
- overflow:hidden將會剪下掉溢出的元素

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.