Introduction to BFC related issues

BFC

We think the browser will be divided into several parts:

User interface: the address bar visible in the browser, forward and backward, open bookmarks, and history.
Network, the browser opens the network thread to send requests or download resource files.
Browser engine: the most core thing. The user interface and the rendering engine transmit instructions or read and write data in the client's local cache. It is the core of the communication between various parts of the browser.
Rendering engine: (browser core), parsing DOMdocuments and CSSrules to typeset content into the browser.
UI backend: it is the various controls in the browser window.
javascriptInterpreter, the part where the browser interprets and executes the javascriptscript (v8)
Data cookiepersistence, session, localStorage, .

The block-level formatting context ( block formatting context) is CSSa part of the visual rendering of the web page , forming BFCan independent area. The child elements in the area will not affect the outside elements.

`BFC`Method of formation :

Floating element: an element that floatis not nonean element.
Absolutely positioned element: positionthe value is absoluteOR fixed.
Inline block:display:inline-block
Block elements that have overflowand whose value is not visible.
displayFor flow-root, it's just a simple trigger BFC.

The 1, 2, 3, and 4 mentioned above can all form a BFC and add their own characteristics. Five are flow-rootjust pure triggers BFC.

`BFC`Commonly used things after formation :

The father manages the son so that the father can wrap the son (used on the father element, come, father hug.)

Solve the problem of float height collapse (this method is not the so-called clear float)

<!DOCTYPE html>
<html>
    <head>
        <style>
            #f{
       
       
                width:200px;
                border:5px solid green;
                /* overflow:hidden; */
                display:flow-root;
            }
            #z{
       
       
                float:left;
                width:100px;
                height:100px;
                border:1px solid blue;
            }
        </style>
    </head>
    <body>
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
</html>

Insert picture description here

Solve the problem of `margin`merging between father and son

<!DOCTYPE html>
<html>
    <head>
        <style>
            #f{
     
     
                width:200px;
                /* border:5px solid green; */
                margin-top:10px;
                display:flow-root;
            }
            #z{
     
     
                margin-top:20px;
                width:100px;
                height:100px;
                border:1px solid blue;
            }
        </style>
    </head>
    <body>
        <div id="f">
            <div id="z"></div>
        </div>
    </body>
</html>

Insert picture description here

Draw a clear line between brothers (use on child elements, brothers will settle accounts)

Solve the problem of folding upper and lower margins between brothers:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #f{
       
       
                width:200px;
                border:1px solid pink;
                margin-top:10px;
            }
            #z1,#z2{
       
       
                margin-top:20px;
                margin-bottom:20px;
                width:100px;
                height:100px;
                border:1px solid blue;
            }
            #f div{
       
       
                display:flow-root;
            }
        </style>
    </head>
    <body>
        <div id="f">
            <div>
                <div id="z1"></div>
            </div>
            <div id="z2"></div>
        </div>
    </body>
</html>

Insert picture description here

Solve the problem of `float`overlapping block elements and non-overlapping elements in rows.

<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
     
     
                float:left;
            }
            #f div{
     
     
                border:1px solid green;
                display:flow-root;
            }
        </style>
    </head>
    <body>
        <div id="f">
            <img src="./1.jpg" />
            <div>123456</div>
        </div>
    </body>
</html>

Before solving the problem:

(That is, `display:flow-root;`before adding , the above example is similar, here is only this case with a screenshot before the problem is solved, the above, if you need to understand, you can copy the code yourself, comment this line of `display:flow-root;`code afterwards , and check the effect before the problem is solved)

Insert picture description here

After solving the problem: ( display:flow-root;after adding )
Insert picture description here

When we encounter this problem, we must first think:

1.什么是BFC 2.怎么形成BFC 3.用BFC干什么 , Use the characteristics of BFC to do this.