BFC與浮動

時間 2019-12-06

標籤 bfc 浮動简体版

原文原文鏈接

1、BFC的含義ide

BFC(block formatting contexts）塊級元素格式化上下文，它決定了塊級元素如何對它的內容進行佈局，以及與其它元素的關係和相互做用。佈局

塊級元素：父級（是一個塊元素）flex

內容：子元素（是一個塊元素）spa

其它元素：與內容同級別的兄弟元素3d

相互做用：BFC裏的元素與外面的元素不會發生影響code

2、浮動觸發條件orm

1.float的值不爲noneblog

2.overflow的值不爲visible文檔

3.display的值爲table-cell、table-caption、inline-block、inline-flex、flexit

4.position的值爲absolute或fixed

3、浮動應用場景

1.自適應兩欄佈局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
　　　　 //overflow：hidden；
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

本來爲

在main中添加樣式overflow：hidden，觸發main生成BFC後

2.清除浮動

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
        // overflow:hidden;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

原圖爲

爲達到清除內部浮動，咱們能夠觸發par生成BFC，那麼par在計算高度時，par內部的浮動元素child也會參與計算。在par中添加overflow:hidden後

3.防止垂直margin重疊

   <style>
        p {
            color: #f55;
            background: #fcc;
            width: 200px;
            line-height: 100px;
            text-align:center;
            margin: 100px;
        }
    </style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>

此時margin會出現重疊取最大值爲100margin

解決方法：在p外面包裹一層容器，並觸發該容器生成一個BFC。那麼兩個P便不屬於同一個BFC，就不會發生margin重疊了。

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

效果以下

4.子元素添加margin-top，父元素會一塊兒掉下來

4、BFC佈局與普通文檔流佈局的區別

普通文檔流佈局規則

1.浮動的元素是不會被父級計算高度

2.非浮動元素會覆蓋浮動元素的位置

3.margin會傳遞給父級

4.兩個相鄰元素上下margin會重疊

BFC佈局規則

1. 內部的Box會在垂直方向，一個接一個地放置。

2. Box垂直方向的距離由margin決定,屬於同一個BFC的兩個相鄰Box的margin會發生重疊(兩個盒子在不一樣的BFC內，就不會發生重疊)。

3. 每一個box的左邊與包含塊的左邊相接觸(對於從左往右的格式化，不然相反);即便存在浮動也是如此。

4. BFC的區域不會與float box重疊(兩欄佈局)。

5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素;反之也如此。

6. 計算BFC的高度時，浮動元素也參與計算。

5、什麼是浮動

在MDN中關於浮動的描述以下：

float CSS屬性指定一個元素應沿其容器的左側或右側放置，容許文本和內聯元素環繞它。該元素從網頁的正常流動中移除，儘管仍然保持部分的流動性（與絕對定位相反）。

舉個例子：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            width: 50px;
            height: 50px;
            background-color: #04A5F0;
        }
    </style>
</head>
<body>
<div class="a">a</div>
float CSS屬性指定一個元素應沿其容器的左側或右側放置，容許文本和內聯元素環繞它。該元素從網頁的正常流動中移除，儘管仍然保持部分的流動性（與絕對定位相反）。
</body>

顯示結果以下：

而後添加float：left後

6、浮動對佈局的影響

1.塊級元素浮動將並排顯示，不會獨佔一行

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。