This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

BFC (Block-level formatting Context)

  • The block formatting context is a separate rendering area on the page, and the child elements inside the container do not affect the layout of the outside elements.
  • It is a factor that determines the layout of the block box and the interaction of the floating elements.

When does CSS create a block formatting context

  1. The root element, the HTML element (the largest BFC)
  2. Float (float is not none)
  3. Absolute position element (position with value absolute or fixed)
  4. Inline block (display inline-block)
  5. Table unit (display table, table-cell and other HTML table-related attributes)
  6. Elastic box (display: flex or inline-flex)
  7. The default value. Content will not be pruned and will appear outside the element box (overflow is not visible)

✨Landing the role of

📌1. Make the parent element contain the child float element, clearing the internal float. (When the child element is floated, the height of the parent element collapses, that is, the height of the parent element becomes 0.)

.father {
  /* The parent does not set the height, the child element floats, resulting in the parent element height collapse */
  width: 100px;
  background-color: burlywood;
}
.children {
  float: left;
  width: 50px;
  height: 50px;
  background-color: coral;
}
Copy the code
<! -- 1. Clear internal float -->
<div class="father">
  <div class="children"></div>
</div>
Copy the code

  • The height of the parent element is not set, and the child element floats, causing the height of the parent element to collapse

  • Workaround: Just turn the parent element into a BFC, usually by setting overflow: Hidden for the parent element

    .father {
  /* The parent does not set the height, the child element floats, resulting in the parent element height collapse */
  width: 100px;
  /* Resolve height collapse by changing the parent element to BFC */
  overflow: hidden;
  border: 3px solid burlywood;
}
Copy the code

  • After setting the parent element to become a BFC, follow rule 6 of the BFC layout rules: When calculating the height of the BFC, the floating element also participates in the calculation

📌2. Overlap between upper and lower margins. (It can prevent margin overlap if it belongs to different BFC)

.father {
  width: 100px;
  border: 3px solid rgb(83.141.230);
}
.children1 {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background-color: coral;
}
.children2 {
  width: 50px;
  height: 50px;
  margin-top: 10px;
  background-color: coral;
}
Copy the code
<div class="father">
  <div class="children1"></div>
  <div class="children2"></div>
</div>
Copy the code

  • As you can see: although both child elements have external margins, only 10px is between them, not 20px

  • Solution: Wrap a block-level element around any child element and set Overflow: Hidden for this block-level element

.box {
  overflow: hidden;
}
Copy the code
<div class="father">
  <div class="children1"></div>
  <div class="box">
    <div class="children2"></div>
  </div>
</div>
Copy the code

  • Follow rule 2 of the BFC layout rules:BoxThe vertical distance is divided bymarginDecision. Belong to the sameBFCTwo neighbors ofBoxthemarginThere will be overlap

  • Note: You should avoid adding margins like this and try to add elements in the same direction, e.g., add a top margin to both elements

📌3. Element overwritten by floating elements

.aside {
  float: left;
  width: 100px;
  height: 150px;
  background-color:coral;
}
.main {
  height: 200px;
  background-color: rgb(238.190.150);
}
Copy the code
<div class="aside"></div>
<div class="main"></div>
Copy the code

  • As shown, the floating element overrides the following element

  • Why is that? Because rule 3 of the BFC layout rules states that the left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float. Therefore, despite the floating element ‘aside’, the left side of main still touches the left side of the containing block.

  • Solution: Follow rule 4 of the BFC layout rule: The BFC area does not overlap with the float box. This is achieved by triggering main to generate BFC.

.main {
  /* Convert it to BFC */
  overflow: hidden;
}
Copy the code

  • Application scenario: Adaptive two (three) column layout (avoid multi-column layout wrapping due to rounded width calculation)

  • Left, right,

    img {
  float: left;
  width: 100px;
  height: 100px;
}
.box {
  width: 30px;
  height: 30px;
  background-color: cornflowerblue;
}
p {
  overflow: hidden;
  width: 100px;
}
Copy the code
    <img src="./img/sky.webp" alt="The sky">
<div class="box"></div>
<p>Very long text</p><p>Very long text</p>
<p>Very long text</p><p>Very long text</p>
Copy the code

  • As shown in figure

  • Question: Why is the top left corner of the div overwritten, but not the text? Div is overwritten by float, but text is not, because float was designed to surround the text around the floating object.

conclusion

  • In fact, the above examples all embody BFC layout rule 5:BFCIt is a separate container on the page, and the child elements inside the container do not affect the outside elements.
  • BFC layout rules:
    • Rule 1: The internal boxes will be placed vertically, one on top of the other.
    • Rule 2: The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap
    • Rule 3: The left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.
    • Rule 4: The region of the BFC does not overlap with the float box.
    • Rule 5: A BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements. And vice versa.
    • Article 6: When calculating the height of the BFC, floating elements are also involved in the calculation