Interviewer: Please tell me what is BFC? Speak clearly in plain English

What the hell is a BFC

Block Formatting Context is the full name of the BFC.

The BFC determines how elements position their content, and how they interact with other elements. When it comes to visual layout, Block Formatting Context provides an environment in which HTML is laid out according to certain rules.

In short, the BFC is a completely independent space (layout environment), so that the children of the space do not affect the layout of the outside. So how do you use the BFC, which is a CSS element attribute

How do I trigger the BFC

Here are a few of the CSS properties that trigger BFC usage

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

The rules of the landing

BFCIt’s a block-level element, and the block-level elements are arranged vertically one after the other
BFCA separate container within the page. The tags in the container do not affect the external tags
The vertical distance is determined by margin and belongs to the sameBFCThe margins of two adjacent labels will overlap
To calculateBFCThe float element is also calculated when the height of

What problem does the BFC solve

1. Use Float to break away from the document stream, height collapse

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Height of collapse</title>
    <style>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: # 000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>
Copy the code

Effect:

You can see the above effect. After setting the float of the box, the result is separated from the document flow, so that the height of the Container is not pushed apart, so that the background color does not come out. To solve this problem, we can trigger the BFC for the container.

Modify the code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Height of collapse</title>
    <style>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: # 000;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>
Copy the code

Effect:

2.Margin overlap

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: # 000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>
Copy the code

Effect:

As can be seen above, we set the margin of the two boxes to 10px, but the result shows that the distance between the two boxes is only 10px, which leads to the collapse of the margin. At this time, the result of the margin of the two boxes is the maximum, instead of closing. To solve this problem, you can use the BFC rule (wrap a box around the elements to form a completely separate space, so that the elements inside are not affected by the outside layout), or you can use the rough method of setting one margin and one padding.

Modify the code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Margin Margin overlap</title>
    <style>
        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: # 000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <p><div class="box"></div></p>
    </div>
</body>
</html>
Copy the code

Effect:

3. Two-column layout

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>A two-column layout</title>
    <style>
            div {
                 width: 200px;
                 height: 100px;
                 border: 1px solid red;
            }

    </style>
</head>
<body>
    <div style="float: left;">Two-column layout Two-column layout Two-column layout Two-column layout Two-column layout Two-column layout Two-column layout</div>
    <div style="width: 300px;">I'm frogman, if you can help me, please click "like", "like", if you can help me, please click "like", if you can help me, please click "like", if you can help me</div>
</body>
</html>
Copy the code

Effect:

As you can see above, the second div element is 300px wide, but is overridden by the first div element setting Float out of the document stream. To solve this problem, we can set the second div element to a BFC.

Modify the code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>A two-column layout</title>
    <style>
            div {
                 width: 200px;
                 height: 100px;
                 border: 1px solid red;
            }

    </style>
</head>
<body>
    <div style="float: left;">Two-column layout Two-column layout Two-column layout Two-column layout Two-column layout Two-column layout Two-column layout</div>
    <div style="width: 300px; display:flex;">I'm frogman, if you can help me, please click "like", "like", if you can help me, please click "like", if you can help me, please click "like", if you can help me</div>
</body>
</html>
Copy the code

Effect:

conclusion

Thank you for reading this article. I hope it helps you. If you have any questions, please correct me.

✿ Theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus theus

Interested partners can join [front end entertainment circle exchange group] welcome everyone to exchange and discuss

Writing is not easy, “like” + “watching” + “retweet” thanks for supporting ❤

Past oliver

Share 15 useful Webpack plugins!!

How to write a Vue component and publish it to NPM

Sharing 12 Common Webpack Loaders

What are CommonJs and Es Modules and how they differ?

Maps to Understand Data Structures with Ease

Do you know all these JavaScript Tricks for work?

【 Suggestions 】 Share some Git commands commonly used in work and how to solve special problems

reference

Blog.csdn.net/weixin_4321…

Blog.csdn.net/sinat_36422…

Interviewer: Please tell me what is BFC? Speak clearly in plain English

What the hell is a BFC

How do I trigger the BFC

The rules of the landing

What problem does the BFC solve

1. Use Float to break away from the document stream, height collapse

2.Margin overlap

3. Two-column layout

conclusion

Past oliver

reference

Related Posts

React & Fiber

Git git

Eight useful SCSS best practices