This is the 14th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Speaking of BFC, let’s first look at a classic CSS style problem: parent collapses

Instance of parent element height collapse

  • Normally, I would want the child element to prop up the parent, as shown in the figure

    .father {
    background-color: pink;
}
.son {
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
​
<div class="father">
    <div class="son">Child elements</div>
</div>
Copy the code

  • But it is the unforeseen that a certain development students need to traverse to the child elements from the left to the right side is moving with a single line of code, as a result of the tragedy, as shown in figure, otherwise we are want child elements to hold up the parent element, but because of the child element floating from the document flow, collapse, causing the parent element height parent have no height, The background color, shadow, etc. set on the parent element will not work!

    .son {
    float: right
}
Copy the code

  • The solution is the same code, but it’s added to the parent element, and then it’s added to the parent element, and then it’s added to the parent element

    .father {
    overflow: hidden;
}
Copy the code

So why? overflow: hidden; What is the magic, and why is it added to the parent element? So with those two questions, we’re going to go into the BFC

BFC

The Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page, where the layout of the Block box takes place, and where floating elements interact with other elements. This is the official MDN to the original words. Emm words, I also a face meng of come in, a face meng of go out…. Why can’t you just speak in plain English?

After check data finally understand, the thing (landing) is actually to the target element to create a completely independent space, less than the influence of outside and inside the outside influence, when calculating the height of the parent element, will calculate the height of the floating child elements, explains the second problem here, why do you want to add on the parent element, Because you want the height of the floating child element to be calculated when the parent element is calculated.

Standard document flow (normal), the height of the parent element in the case of not set, is automatically calculated according to the height of the child elements by child elements (hold up), but special cases following elements from the document flow (floating or absolute positioning), then the parent element automatically calculate height, will not go to calculating the height of the floating child elements, This leads to the common problem at the beginning of this article: parent height collapse

Create the landing

Since we know how to solve the problem of parent element height collapse (solution: is to create BFC for the parent element), the next is how to create BFC, there are many ways to create, more full can go to see **BFC -MDN** related introduction, commonly used in the following ways:

  • The floating element

    float: left/right; / / not tonone
Copy the code

  • Absolute positioning element

    position: absolute/fixed; // Deviate from the standard document streamCopy the code

  • Block element set overflow not to visible

    overflow: hidden/auto/scroll... And so on, as long as the block element is not visibleCopy the code

    This explains the first of the two questions above. Why does overflow: Hidden have magic because it creates BFC for elements

  • Common clear floating mode (harmless) – test site

    // Add classes, using pseudo-elements.clearfix::after {
  content: "";  /* Pseudo-elements must set the content attribute */
  display: block;  The clear property applies to floating and non-floating elements */
  clear: both;  /* Key: clear left/right float */
}
Copy the code