首頁 > 文章 > web前端 > CSS實現清除浮動問題的

CSS實現清除浮動問題的

零到壹度原創: 2018-03-27 16:36:471745瀏覽

首先，我們要思考一個問題：為什麼要清除浮動？在我做小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； # ##

#4C1號.新增偽類別：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

##########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将会剪切掉溢出的元素

以上是CSS實現清除浮動問題的的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html Static Float display overflow 伪类 flex table

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：詳解CSS的居中方式下一篇：詳解CSS的居中方式

看更多