Block Formatting Context

BFC (Block Formatting Context) is a part of the visual CSS rendering of a web page. It is the area where the layout of block boxes occurs and where floating elements interact with other elements. It is a rendering area used for laying out block-level boxes and is completely independent of the outside area. It is a separate environment.

Triggering BFC

  • The root element <html>.
  • Floating elements, where the float property is not none.
  • Absolutely positioned elements, where the position property is absolute or fixed.
  • Inline block elements, where the display property is inline-block.
  • Table cells, where the display property is table-cell.
  • Table captions, where the display property is table-caption.
  • Anonymous table cells, where the display property is table, table-row, table-row-group, table-header-group, table-footer-group, or inline-table.
  • Block elements with an overflow value other than visible.
  • Elements with a display value of flow-root.
  • Elements with a contain value of layout, content, or paint.
  • Flex elements, where the display property is flex or inline-flex, and the element is a direct child.
  • Grid elements, where the display property is grid or inline-grid, and the element is a direct child.
  • Multi-column containers, where the column-count or column-width is not auto, including when column-count is 1.

Applications of BFC

Avoiding Float Overflow

<!DOCTYPE html>
<html>
<head>
    <title>Avoiding Float Overflow</title>
    <style type="text/css">
        .parent{
            border: 1px solid #eee;
        }
        .child{
            float: left;
            width: 100px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- Without using BFC -->
    <!-- Floating element overflows the parent container -->
    <div class="parent">
        <div class="child"></div>
    </div>

    <!-- Clearing the float, separating the example -->
    <div style="clear: both;height: 20px;"></div>

    <!-- Using display: flex; to trigger BFC -->
    <!-- Floating elements are contained within the parent container -->
    <div class="parent" style="display: flex;">
        <div class="child"></div>
    </div>
</body>
</html>

Avoiding Margin Collapsing

Translate into English:

<!DOCTYPE html>
<html>
<head>
    <title>Avoid Margin Collapse</title>
    <style type="text/css">
        .parent{
            border: 1px solid #eee;
        }
        .child{
            height: 100px;
            width: 100px;
            margin: 10px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- Not using BFC -->
    <!-- Margin collapse -->
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>

    <!-- Separator -->
    <div style="height: 20px;"></div>

    <!-- Trigger BFC using display: flow-root; -->
    <!-- Margin independent calculation -->
    <div class="parent" >
        <div class="child"></div>
        <div style="display: flow-root;">
            <div class="child"></div>
        </div>
    </div>
</body>
</html>

Avoid Text Wrapping Around Floats

<!DOCTYPE html>
<html>
<head>
    <title>Avoid Text Wrapping Around Floats</title>
    <style type="text/css">
        .parent{
            border: 1px solid #eee;
        }
        .child{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- Not using BFC -->
    <!-- Text wraps around the child elements -->
    <div class="parent">
        <div class="child"></div>
        <div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
        </div>
    </div>

    <!-- Clear floats - Separator -->
    <div style="clear: both;height: 20px;"></div>

```html
<!-- Trigger BFC using display: inline-block; -->
<!-- Text does not wrap around child elements -->
<div class="parent">
    <div class="child"></div>
    <div style="display: inline-block;">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
    </div>
</div>
</body>
</html>

Daily Question

https://github.com/WindrunnerMax/EveryDay

References

https://www.jianshu.com/p/0d713b32cd0d https://segmentfault.com/a/1190000009624181 https://segmentfault.com/a/1190000013514597 https://blog.csdn.net/qq_41257129/article/details/89641726 https://blog.csdn.net/sinat_36422236/article/details/88763187 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts