块级格式化上下文BFC

2024-02-27 17:33:03

BFC:Block Formatting Context,块级格式化上下文，可以理解为BFC是块级作用域

元素定位方案

标准文档流

块级元素按出现顺序从上至下垂直排列

行内元素按照水平排列，直到当行被占满，然后换行。块级元素则会被渲染成为一个完整的新行

所有元素默认都是普通流定位

浮动

元素先按照标准流的方式出现，然后根据浮动向左边或者向右边发生偏移。

绝对定位方案

元素整体脱离标准流，所以决定定位元素不会对其他兄弟元素造成影响

BFC作用于标准流定位，BFC可以看作是一块渲染区域，有着自己的渲染规则，这块渲染区域是隔离于外界的独立容器，容器里的元素在布局上不会影响到容器外面的元素。

BFC规则

属于同一个 BFC 的两个相邻 Box 垂直排列
属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
BFC 中子元素的 margin box 的左边，与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
文字层不会被浮动层覆盖，环绕于周围

如何添加BFC

根元素：<html>

浮动元素：元素的float属性不可以是none

绝对定位元素：position为absolute或者fixed

display属性是:inline-block、table-cell、table-caption、table、table-row、table-row-grounp、table-header-grounp、table-footer-grounp、inline-table、flow-root、flex、inline-flex、grid、inline-grid

overflow值不为visible的元素

content值为layout、content、paint、

多列元素（元素的column-count或column-width不为auto，包括column-count为1）

这是最常用的几种方法,图片来自B站技术蛋老师　　　　

BFC作用

1.避免外边距塌陷

外边距塌陷示例

        .cube {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: blue;
            margin: 100px;
        }
------------------------------------------------
    <div class="cube"></div>
    <div class="cube"></div>

使用container包裹两个cube创建BFC避免外边距塌陷

        .cube {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: blue;
            margin: 100px;
        }

        .container {
            overflow: hidden;
        }
----------------------------------------------------------
    <div class="container">
        <div class="cube"></div>
    </div>
    <div class="container">
        <div class="cube"></div>
    </div>

2.清除浮动

没有清除浮动的示例

为子元素添加了浮动，子元素脱离标准流使得父元素没有内容，发生高度塌陷。

        .cube {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: blue;
            float: left;
        }

        .container {
            border: 10px solid red;
        }
 
    <div class="container">
        <div class="cube"></div>
    </div>

使用overflow为父亲元素添加BFC

        .cube {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: blue;
            float: left;
        }

        .container {
            border: 10px solid red;
            overflow: hidden;
        }
----------------------------------------------------
    <div class="container">
        <div class="cube"></div>
    </div>

3.阻止元素被浮动元素覆盖

浮动元素脱离标准流，下一个元素会占用浮动元素原本的位置，从而被浮动的元素覆盖

        .floatDiv {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .normalDiv {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
 -------------------------------------------------------------
    <div class="floatDiv"></div>
    <div class="normalDiv"></div>

为没有浮动的元素添加overflow-hidden

        .floatDiv {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .normalDiv {
            width: 200px;
            height: 200px;
            background-color: blue;
            overflow: hidden;
        }
----------------------------------------------------------------
    <div class="floatDiv"></div>
    <div class="normalDiv"></div>

码农公寓