CSS summary of BFC

  1. What is BFC?

Block formatting context (BFC). It is a separate rendering area, with only block-level box participation, which dictates how the internal block-level box is laid out and has nothing to do with the outside of the area.

2. Performance behavior of BFC

A. Vertical arrangement of internal boxes. B. The vertical distance of box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap c. The margin-left edge of each element touches the left of the containing box left (for formatting from left to right, otherwise the reverse). This is true even if there is a float. Unless the element itself forms a new BFC. D. The BFC area does not overlap the float box. E. BFC is a separate container on the page, in which the child elements do not affect the outside elements. And vice versa. F. When calculating the height of the BFC, the floating element also participates in the calculation

3. How is BFC formed?

A. Root element (HTML) B. Float (float of element is not None) C. Absolute positioned elements (elements with position as absolute or fixed) d. Non-block-level elements have display: inline-block, table-cell, table-caption, flex, inline-flex E. Block-level elements have overflow and are not visible

4. What problems can BFC solve

A. Clear float B. prevent margin overlap C. prevent margin overflow D. Adaptive two-column layout as follows:

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .left {
        float: left;
        background-color: green;
        width: 200px;
        height: 200px;
    }

    .right {
        overflow: hidden;
        height: 200px;
        background-color: hotpink;
    }
</style>
<body>
    <div class="container">
        <div class="left"> < /div>
        <div class="right"> < /div>
    </div>
</body>
Copy the code