【css】塊格式化上下文(BFC)

懟懟 2021-09-19 16:29:19 阅读数:53

css 格式化 格式 上下文 下文
  1. 定比特方式
  2. BFC

1 定比特方式

  1. 普通流/文檔流
  2. 浮動
  3. 絕對定比特

1.1 普通流/文檔流

規則

  • 元素按照其在HTML中的先後比特置自上而下布局
  • 行內元素水平排列,直到當行被占滿然後換行,塊級元素則會被渲染為完整的一個新行
  • 所有元素默認都是普通流定比特

1.2 浮動

規則

  • 元素先按照普通流的比特置出現,然後根據浮動的方向盡可能向左或向右偏移
  • 平移到容器邊框,或者碰到另外一個浮動的元素
  • 父容器得不到脫離普通普通流的子元素的高度
  • 會將元素的display屬性變更為block
  • 浮動前的元素:

    block:無影響
    inline:浮動比特於之前
    inline-block:浮動比特於之前
  • 浮動後的元素:

    block:覆蓋,浮動在上
    inline: 緊跟浮動元素
    inline-block:緊跟浮動元素
  • 重疊時

    block:浮動在上,塊內容環繞浮動元素
    inline:浮動在下
    inline-block:浮動在下

清除浮動

  • 使用clear屬性

    //在父級後加一個空塊
    .clear {
    clear:both
    }
    //使用偽元素加空塊
    .parent::after {
    content: "";
    display: block;
    clear: both;
    }
  • BFC

    .parent {
    overflow:hidden;
    }
    上面主要針對父級高度塌陷
    可以對浮動周邊元素添加clear屬性,清除浮動帶來的影響

1.3 絕對定比特

規則

  • 元素會整體脫離普通流,不會對其兄弟元素造成影響

2 BFC

規則

  • 屬於普通流,可以視為一塊渲染區域或者元素的一個屬性 - 隔離的獨立容器,不會影響其他元素
  • 浮動元素的高度也參與計算

2.1 觸發BFC

  1. 根元素
  2. float: 不為 none
  3. position: absolute、fixed
  4. display:inline-block、inline-table、inline-flex、inline-grid、flex、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、flow-root
  5. overflow:不為visible的塊元素
  6. contain:layout、content、paint
  7. 多列容器 column-count、column-width不為auto

2.2 作用

  1. 避免外邊距重疊
  2. 清除浮動
  3. 阻止元素被浮動元素覆蓋

避免外邊距重疊

<div class="item"></div>
<div class="item"></div>
.item {
width: 300px;
height: 100px;
margin: 100px;
background-color: aquamarine;
}

image.png

兩個元素外邊距都是100px,上下間距應該是200px,結果為100px,上下邊距發生了重疊,
<div class="container">
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
</div>
.item {
width: 300px;
height: 100px;
margin: 100px;
background-color: aquamarine;
}
.container {
overflow: hidden;
}

image.png

在兩個元素分別包上一個container,觸發BFC,BFC上下不會發生邊距重合

清除浮動
上面已經介紹,解决父級高度塌陷的問題

阻止浮動元素覆蓋
前面介紹了,浮動元素後面的塊級元素會被浮動元素覆蓋
可以讓這個塊級元素觸發BFC,添加overflow:hidden

<div class="item1"></div>
<div class="item2"></div>
.item1 {
width: 100px;
height: 100px;
float: left;
background-color: aquamarine;
}
.item2 {
width: 300px;
height: 300px;
background-color: #dede;
}

image.png

.item2 {
width: 300px;
height: 300px;
background-color: #dede;
overflow: hidden;
}

image.png

版权声明:本文为[懟懟]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210919162918980i.html