BFC佈局

時間 2020-09-14

標籤 bfc 佈局简体版

原文原文鏈接

BFC(塊級格式化上下文)

是web頁面的可視化CSS渲染的一部分，是佈局過程當中生成塊級盒子的區域，也是浮動元素與其餘元素的交互區域。css

觸發條件

根元素, 即HTML元素
float的值不爲none
overflow的值不爲visible
display的值爲inline-block, table-cell, table-caption
position的值爲absolute或fixed

佈局規則

內部的box會在垂直方向, 一個接一個地放置(這點就是咱們常見到的塊級元素佔一行)
box的垂直方向的距離由margin決定, 屬於同一個BFC的兩個相鄰的margin會發生重疊, 與方向無關(垂直方向上的margin重合也就是咱們常說的「坍塌現象」)
每一個元素的margin box的左邊, 與包含border box的左邊相接觸(對於從左往右的格式化, 不然相反). 即便存在浮動也是如此
BFC的區域不會與float box重疊
BFC就是頁面上的一個隔壁的獨立容器, 容器裏面的子元素不會影響到外面的元素. 反之也如此
計算BFC的高度時, 浮動元素也參與計算

對比初學css時的規則

block元素會擴展到與父元素同寬, 因此block元素會垂直排列
垂直方向上兩個相鄰的DIV margin重疊, 而水平方向上不會(這個說法就不徹底正確)
浮動元素會接近左上方或右上方
爲父元素設置overflow: hidden 或浮動元素, 則會包含浮動元素

初學CSS規則背後更深層次的概念其實就是BFC佈局規則html

做用

自適應的兩欄佈局
能夠阻止元素被浮動元素覆蓋
能夠包含浮動元素——清除內部浮動
分屬不一樣的BFC時能夠阻止margin重疊

經過BFC實現兩欄佈局

1
2
3
4
5
大專欄  BFC佈局class="line">6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            height: 100%;
            width: 100%;
        }
        .left {
            float: left;
            height: 200px;
            background-color: aquamarine;
            width: 300px;
            margin-right: 20px;
        }
        .right {
            height: 300px;
            background-color: blueviolet;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

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