This is the 6th day of my participation in the August More Text Challenge, for more details: August more Text Challenge!

Before we talk about BFC, let’s take a look at the common positioning scheme. Positioning scheme is the layout of control elements. There are three common schemes:

  • Normal flow

In a normal stream, the elements are laid out up and down according to their sequence in HTML. In this process, the inline elements are arranged horizontally until the row is filled and line breaks, and the block-level elements are rendered as a complete new row. Unless specified otherwise, all elements default to normal stream positioning, so to say, The position of an element in a normal flow is determined by its position in the HTML document.

  • Floating (float)

In a floating layout, elements first appear in the position of a normal stream and then drift as far to the left or right as possible depending on the direction of the float, similar to the effect of wrapping text in print typesetting.

  • Absolute Positioning

In an absolute positioning layout, elements are completely detached from the normal flow, so absolute positioning elements do not affect their siblings, and their exact positions are determined by their absolute positioning coordinates.

define

Block formatting context (BFC). It is a separate rendering area, only block-level box participation, it specifies the internal block-level box layout, and has nothing to do with the outside of the area

BFC layout rules

The internal boxes will be placed vertically, one on top of the other

The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap

The left side of the margin box of each box (block box versus row box) touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite), even if there is a float

The region of the BFC does not overlap with the float box

A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa

When calculating the height of the BFC, floating elements are also involved

How do I create a BFC

  1. Root element: HTML
  2. Non-overflow visible elements: Overflow is not visible
  3. Set float: The float property is not None
  4. Set position to Absolute or Fixed
  5. Display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

BFC features and applications

1. Margins of the same BFC fold

<body>
    <div></div>
    <div></div>
</body>
</html>

<style>
div{
    width: 100px;
    height: 100px;
    background: pink;
    margin: 100px;
}
</style>
Copy the code

In effect, because both div elements are in the same BFC container, the bottom margin of the first div overlaps the top margin of the second div, so the two boxes are only 100px apart, not 200px apart.

If you want to avoid overlapping margins, you can put them in different BFC containers.

<body>
    <div class="content">
       <div></div>
    </div>
    <div class="content">
        <div></div>
    </div>
</body>
</html>

<style>
.content{
    overflow: hidden;
}
.content div{
    width: 100px;
    height: 100px;
    background: pink;
    margin: 100px;
}
</style>
Copy the code

At this point, the margins between the two boxes are 200px

2. BFC can contain floating elements (clear floating)

As we all know, floating elements leave the normal document flow. Consider the following example

<div style="border: 1px solid pink;" > <div style="width: 100px; height: 100px; background: #eee; float: left;" ></div> </div>Copy the code

Because the elements in the container float out of the document flow, the container is left with a margin height of 2px. If the BFC of the container is triggered, the container will be wrapped with floating elements

<div style="border: 1px solid pink; overflow: hidden;" > <div style="width: 100px; height: 100px; background: #eee; float: left;" ></div> </div>Copy the code

The effect is as follows:

3. The BFC prevents elements from being overwritten by floating elements

Let’s start with a text wrap effect:

<div style="height: 100px; width: 100px; float: left; <div style="width: 200px; height: 200px; > < span style = "max-width: 100%; clear: both; min-height: 1em; Four o 'clock in the morning, I saw crabapple flowers awake.Copy the code

In this case, the second element is partially covered by the floating element (but the text is not covered by the floating element). If you want to avoid the element being covered, you can use the BFC feature of the second element and add overflow: hidden to the second element.

This method can be used to implement a two-column adaptive layout, where the left side has a fixed width and the right side has an adaptive width