Css裏的BFC

時間 2021-05-13

標籤 css html 佈局 flex spa code orm htm three 圖片欄目 CSS 简体版

原文原文鏈接

1、BFC簡介

BFC全稱：Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則css

（能夠把 BFC 理解爲一個封閉的大箱子，，容器裏面的子元素不會影響到外面的元素）

2、BFC的觸發條件（只要元素知足下面任一條件便可觸發 BFC 特性）

body 根元素；
浮動元素：float 不爲none的屬性值；
絕對定位元素：position (absolute、fixed)；
display爲： inline-block、table-cell、flex；
overflow 除了visible之外的值 (hidden、auto、scroll)；

3、BFC的佈局規則

<1> 內部的盒子會在垂直方向，一個個地放置；
<2> BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然
<3> 屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊；
<4> 計算BFC的高度時，浮動元素也參與計算
<5> 每一個元素的左邊，與包含的盒子的左邊相接觸，即便存在浮動也是如此；
<6> BFC的區域不會與float重疊；html

4、BFC的應用

<1>解決margin重疊問題
<2>解決浮動高度塌陷問題
<3>解決侵佔浮動元素的問題佈局

5、解決方法（代碼和效果圖）

<1>解決margin重疊問題
代碼以下：flex

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>解決margin重疊</title>
        <link rel="stylesheet" href="index.css"/>
    </head>
    <body>
        <div class="one"></div>
        <div class="box">
            <div class="two"></div>
        </div>
        <div class="three"></div>
    </body>
</html>
body{
    margin:0 auto;
}
.box{
    overflow:hidden;
}
.one{
    height:50px;
    background-color:red;
    margin:20px 0;
}
.two{
    height:50px;
    background-color:red;
    margin:20px 0;
}
.three{
    height:50px;
    background-color:red;
    margin:20px 0;
}

效果圖以下：
spa

（若將box中的overflow:hiddden;去掉的話第二個div的margin就會和上下倆個div的margin重疊）
<2>解決浮動高度塌陷問題
代碼以下：code

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>解決父元素高度塌陷</title>
        <link rel="stylesheet" href="index4.css"/>
    </head>
    <body>
        <div class="box">
            <div class="one"></div>
            <div class="two"></div>
        </div>
    </body>
</html>
body{
    margin:0 auto;
}
.box{
    overflow:hidden;
    width:500px;
    background-color:yellow;
    margin:0 auto;
}
.one{
    height:50px;
    width:100px;
    background-color:red;
    float:left;
}
.two{
    height:100px;
    width:200px;
    background-color:blue;
    float:right;
}

效果圖以下：
圖片描述orm

（不給父元素overflow:hiddden;的話因爲父元素沒高而子元素也因爲浮動不能撐起父元素，父元素就會塌陷）
<3>解決侵佔浮動元素的問題
代碼以下：htm

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>解決侵佔浮動元素的問題</title>
        <link rel="stylesheet" href="index5.css"/>
    </head>
    <body>
        <div class="box">
            <div class="one"></div>
            <div class="two">
                akehfakwehfaie<br/>
                akehfakwehfaie<br/>
                akehfakwehfaie<br/>
                akehfakwehfaie<br/>
                akehfakwehfaie<br/>
                akehfakwehfaie<br/>
            </div>
        </div>
    </body>
</html>
body{
    margin:0 auto;
}
.box{
    overflow:hidden;
    width:700px;
    background-color:yellow;
    margin:0 auto;
}
.one{
    height:100px;
    width:150px;
    background-color:red;
    float:left;
}
.two{
    height:170px;
    background-color:blue;
    /* float:left; */
    overflow:hidden;
}

（這裏是將紅色div左浮給藍色的divoverflow：hidden；藍色的就不會被紅色的擋住three

注意要給父元素divoverflow：hidden；不然當藍色框內容少時父元素會和藍色div一塊兒變化）

1. css裏的BFC的用法
2. css裏的BFC用法
3. CSS裏的BFC和IFC的用法
4. CSS中的BFC
5. css中的BFC
6. 淺析CSS裏的 BFC 和 IFC
7. CSS——BFC
8. CSS BFC
9. CSS-- BFC
10. CSS-BFC
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 漫談MySQL的鎖機制

相關標籤/搜索

每日一句

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