6 Clear Floats and BFCs Interviewers Like to Ask

foreword

Hello everyone, I'm Lin Sanxin, clearing floats is one of the most frequently asked questions in CSS during interviews. When the interviewer asks you to tell you how to clear floats, he definitely doesn't want you to simply answer floats I want you to answer BFC , even if he doesn't want you to answer it, you have to answer BFC , so that you can stand out among the many interviewers! Hey-hey!

float

1. Scene

When we want to achieve the following effects, we will definitely think of floating float

• flex: Shouldn't it be the first to think of me?
• me: no, i don't want to
• flex: heh, man

Not many BBs, go directly to the code

<div class="box">
        <div class="left"></div>
        <div class="right"></div>
</div>

.box {
            border: 1px solid black;
            padding: 5px;
            width: 450px;
      }
.left {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
       }
.right {
            width: 100px;
            height: 100px;
            background-color: red;
            float: right;
       }

But got this effect:

WTF!!! How is this? ? ? It's not what I thought! ! ! Why is this? ? ?

2. Find the reason

The reason is that the floating element will be out of the document flow, what is out of the document flow? For example, one day you say to your boss: "I don't want to do it anymore, the world is so big, I want to see it", then From now on, your boss can't take care of you. document flow in the same way. Once an element floats, it will leave the document flow, then its parent element will not be able to control it, and the layout will move forward, so the phenomenon of the height collapse of the parent element of

clear float

If you want to solve the above problems, then you have to take all means, which is what the interviewer usually asks, , tell me how you usually clear the float. At this time, you must answer as many kinds as possible, hehe! !

1. Set the parent to float as well

.box {
            border: 1px solid black;
            padding: 5px;
            width: 450px;
            float: left
      }

Disadvantages: This method definitely does more harm than good. If you think about it, if the parent level is set to float, the grandfather level will definitely be affected again, and the height collapse of the grandfather level must be solved. Isn't this an infinite nesting doll? ?

2. Add positioning absolute to the parent

.box {
            border: 1px solid black;
            padding: 5px;
            width: 450px;
            height: 100px
      }

Disadvantages: position:absolute will also be separated from the document flow, which affects the overall layout. Isn't this making me

overflow:hidden to the parent

.box {
            border: 1px solid black;
            padding: 5px;
            width: 450px;
            overflow:hidden
      }

Disadvantage: When the text is too long and contains too long English, the English text will be hidden

<div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div>林三心林三心林三心林三心林三心林三心林三心林三心林三心林三心林三心林林三心林林三心林林三心林林三心林林三心林林三心林林三心林林三心林林三心林林三心林林sunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Lin心林林三心</div>
</div>

4. Set the corresponding height to the parent

.box {
            border: 1px solid black;
            padding: 5px;
            width: 450px;
            height: 100px
      }

Disadvantages: If the floating element has a fixed width , that's fine. If it is a variable width , then this method is very inflexible. It may be 100px today, 200px tomorrow, and 300px the day after tomorrow. Tired?

5. Add empty elements at the end to clear

About clear :


So here bottomDiv set to clear:both , which means that it cannot have floating elements on the left and right, which forces him to move down, which in turn stretches the height of the parent box.

<div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottomDiv"></div>
</div>

.bottomDiv {
            clear: both;
        }

Disadvantages: Obviously, adding a div tag increases the rendering burden of the page (although I think it should have little effect)

6. Add a pseudo element to the parent for clear

This method replaces the above div pseudo-element. Everyone knows that pseudo-elements will not be rendered, so it also makes up for the shortcomings of the previous method.

.box::after {
            content: '.';
            height: 0;
            display: block;
            clear: both;
        }

Cons: Oops, stop nitpicking! ! ! This should be the best solution so far. I can't find the shortcomings, welcome the big guys to provide them.

Talk about BFC

1. Official explanation

The Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page, the area where the layout process of the block box takes place, and where the floating element interacts with other elements. The browser's restriction rules BFC

• 1. The child elements that generate the BFC element will be placed one after the other.
• 2. Vertically their starting point is the top of a containing block, and the vertical distance between two adjacent child elements depends on the element's margin property. In BFC-- the margins of adjacent block-level elements will collapse (Mastering margin collapsing).
• 3. In the child elements that generate the BFC element, the left margin of each child element touches the left border of the containing block (for right-to-left formatting, the right margin touches the right border), even for floating elements (although The content area of a child element is compressed due to the float), unless the child element also creates a new BFC (e.g. itself is a floated element).
This is the official explanation on MDN (⊙o⊙)…, it’s really official.

2. Trigger condition

• The root element, which is the HTML tag
• Floating element: float value is left、right
• overflow value is not visible, it is auto、scroll、hidden
• display value is inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、- - grid、inline-grid
• Positioning element: position value is absolute、fixed

3. Personal understanding

• 1. The inner Box will be placed one by one in the vertical direction
• 2. The vertical distance of the inner Box is determined by the margin. (The complete statement is: the margins of two adjacent Boxes belonging to the same BFC will collapse, but different BFCs will not collapse.)
• 3. The left margin of each element touches the left border of the containing block (from left to right), even for floating elements. (This means that the BFC neutron element will not exceed his containing block, and the element whose position is absolute can exceed his containing block boundary)
• 4. The area of BFC will not overlap with the element area of float
• 5. When calculating the height of BFC, floating child elements also participate in the calculation
1 and 3 , everyone knows it, let’s focus on point 2，4，5

4. Solve the problem of margin overlap

If I want the distance between two boxes to be 20px, I write this:

<div class="box2"></div>
<div class="box3"></div>

.box2 {
            margin-bottom: 10px;
            width: 100px;
            height: 100px;
            background-color: red;
        }

.box3 {
            margin-top: 10px;
            width: 100px;
            height: 100px;
            background-color: red;
        }

It turned out that it did not meet expectations, and the margins of the two boxes overlapped:

How to solve it? According to the second point of personal understanding: two boxes with BFC environments margin will not overlap, then we only need to trigger the BFC of box3

.box3 {
            margin-bottom: 10px;
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

This achieves a 20px interval between the keys in the two boxes.

5. Floating elements do not overlap with BFC boxes

Or look at the example:

<div class="box2 w"></div>
<div class="box3 w"></div>

.w {
        width: 100px;
        height: 100px;
    }

.box2 {
        float: left; // 触发BFC
        background: red;
    }

.box3 {
        background: green;
    }

The result is that because the red box floats out of the document flow, the green box is pushed forward, causing the red box to cover the green box

How to solve it? According to point 4 of personal understanding: The float box does not overlap with the BFC box, so we only need to set the green box to the BFC box.

.box3 {
        background: green;
        overflow:hidden // 触发BFC
    }

Effect:

6. Use BFC to clear float

According to the 5th point of personal understanding: BFC box will float box into the height, which is why the height can be solved by setting float: left position: absolute overflow: hidden to the parent box. These practices all turn the parent box into a BFC box, and the BFC box will float box into the height, which solves the problem of height collapse.

Conclusion!

I'm Lin Sanxin, an enthusiastic front-end rookie programmer. If you are motivated, like the front-end, and want to learn the front-end, then we can make friends and fish together haha, touch the fish group, add me, please note [Si No]