Talking about BFC and height collapse, talking about BFC collapse

Talking about BFC and height collapse, talking about BFC collapse

This concept was probably introduced to me last year. I recorded it a little and did not conduct any in-depth research. It coincided with the recent autumn recruitment. I wrote it here to deepen my impression by the way.

 

What is BFC?

All elements on the page imply a Block Formatting Context (BFC) attribute.

 

What is BFC used? How to enable BFC? What will happen after BFC is enabled?

Here we will first look at a few small situations. And several other problems are thrown out.

(1)

<div class="div1">    <div class="div2">div2</div>    <div class="div3">div3</div></div><div class="div4"></div>

 

            .div1{                width: 50px;                background-color: #bfc;                margin-bottom:50px;            }            .div2{                width: 50px; height: 50px;                background-color: #0000FF;                margin-bottom:50px;                color: #fff;            }            .div3{                width: 50px;height: 50px;                background-color: #0000FF;                margin:50px 0 50px 0;                color: #fff;                        }            .div4{width: 100px; height: 100px;background-color: #bfc; }    

 

 

① Let's take a look. There are four boxes, with 50 PX blue;

Bean Paste green is the parent element div1, and its margin-bottom and sub-element div3 are both 50px

Obviously, the parent and child elements overlap, and the bottom margin of the div at the bottom is 50px instead of 100px.

② What about sibling elements? The distance between div2 and div3 is also 50px, that is, the vertical margin between them is also folded.

 

Okay. Next we will discuss what will trigger the vertical margin overlap.

① First, it is clear that the horizontal margin does not overlap in any way, so the first point is vertical.

② Adjacent, what is adjacent, that is, elements are not separated by clear, content, padding, and border. (Here we will be able to clarify the principles of the common methods for clearing floating)

The Code shows that div1 is adjacent to div3, div2, and div3. Therefore, the vertical margin is folded.

　　　　

So if we have such a requirement that the vertical margin does not overlap (this requirement is rare in reality), then BFC will be used. Let's first look at the effect and then talk about how it works.

When BFC is enabled for div1 and div3 (the overflow of div1 is auto or hidden, and div3 is floating), we can see that the margins of div2 and div3 are added instead of overlapping,

The bottom margins of div1 and div3 are also separated. In addition, when the parent element enables BFC, it can cancel the overlap with the outer margin of the adjacent child element (the child can not be opened). Here, it is all opened to demonstrate the adjacent brother.

The effect between the primary and secondary elements.

It is important thatAdjacentIf clear, content, padding, and border are separated, the outer margin will overlap.

Well, this isEnable the first function of BFC: avoid overlapping outer margins of adjacent elements.

　　　　In fact, as long as one of the adjacent elements enables BFC, consider clearing the floating problem. For example, in the example above, div3 enables floating, if div1 does not enable BFC, the height will collapse.

 

(2)In the previous example, remove div2 and div4, and enable div3 to float. In this case, the parent element div1 has a height collapse.

After div1 BFC is enabled, the height collapse caused by floating is successfully solved. The principle is to enable the BFC element, and its sub-elements will also be involved in the height calculation.

That isThe second role is to avoid high collapse caused by floating

 

　　　　Next, let's talk about how to enable BFC: overflow (non-visible) [Note that the parent element should enable BFC when handling parent-child margin folding], float (non-none) position (non-static and relative), display (inlined-block, table-cell, table-caption ). One of them.

 

Compatible: No BFC in ie6, but hasLayout exists, similar to BFC. Enable: directly set the zoom of an element to 1. Zoom indicates the magnification, followed by a number, that is, the magnification.

 

In some cases, the requirement is that the parent element cannot be moved to overflow. What should we do if we want to solve the high collapse? There is another floating clearance solution.

There are quite a lot of Baidu, so here is the most common example.

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

Add this class to the parent element with a collapsed height.

Let's take a look at the principles of this practice.

After an element starts floating, if the remaining white part next to it is enough for the subsequent element to be added, the subsequent element will be added. After the elements (must not be floating) are added with clear, you can clear the floating effect around it so that it does not fill in the above, you can open the height of the parent element.

Using this principle, we add a "after" pseudo element to the parent element so that it can clear the floating, and will not add the floating white, the advantage of adding an empty div directly from the comparison of adding an empty content in css is to avoid adding redundant dom nodes.