BFC

1. What is BFC (Independent Space, flowing Elements)

• Block Formatting Context (BFC)
• Form a separate rendering space with child elements unaffected by external elements

2. Conditions for the formation of BFC

• Float element: float a value other than none;
• Position element: Position (Absolute, fixed);
• Overflow values other than visible (hidden, auto, scroll);
• The display value is:
• Inline-block, table-cell, table-caption, table,
• Inline-table, flex, inline-flex, grid, inline-grid

Iii. Characteristics of BFC

• The internal boxes will be placed one after the other vertically
• The vertical distance is determined by margin (margins of two adjacent boxes of the same BFC will overlap)
• The “BFC region” is not overlapped by float’s element region
• When calculating the height of the BFC, floating elements are also involved
• Children inside the container do not affect outside elements (independent space)

Four, the application

1. Solve the problem of overlapping margins (prevent element collapse)

HTML: < divclass="container">
        // To take advantage of the BFC's spatial independence, force box1 and Box2 to be 30px apart instead of 20px
        <div class="wrapper">
            <div class="box1"></div>
        </div>
        <div class="box2"></div></div> CSS:.container {overflow: hidden;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    .wrapper {
        overflow: hidden;
    }
    
    .box1 {
        height: 20px;
        margin: 10px 0;
        background-color: green;
    }
    
    .box2 {
        height: 20px;
        margin: 20px 0;
        background-color: green;
    }
Copy the code

2. Fix one side and use flow layout on the other side

HTML: < divclass="column"></div>
    <div class="column"></div>CSS: the column: the NTH -of-type(1) {
        float: left;// Use float
        width: 200px;
        height: 300px;
        margin-right: 10px;
        background-color: red;
    }
    
    .column:nth-of-type(2) {
        overflow: hidden;/ / create the landing
        height: 300px;
        background-color: purple;
    }

Copy the code

3. Fix both sides and use flow layout in the middle

HTML: < divclass="contain">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>< / div > CSS: the column: the NTH -of-type(1),
    .column:nth-of-type(2) {
        float: left;
        width: 100px;
        height: 300px;
        background-color: green;
    }
    .column:nth-of-type(2) {
        float: right;
    }
    .column:nth-of-type(3) {
        overflow: hidden;  / * create landing * /
        height: 300px;
        background-color: red;
    }
Copy the code

4. Solve the floating text surround problem

HTML: < divclass="left"></div>
    <p>Hello, hello, hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello you hello hello hello hello hello hello hello hello you hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello you Hello hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello You Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello you</p>
css
    p{
        .left {
            float: left; width: 100px; height: 100px; background-color: yellow; } p { background-color: green; overflow: hidden; }}Copy the code

5. BFC contains floating blocks

• This is a familiar one: use Overflow: Hidden to clear floats, because floating boxes cannot outheight the parent box in the standard document flow. This is no more than the explanation, I believe you already understand.