directory

BFC

1. Layout rules of BFC

The element that triggers the BFC

3. Function and principle of BFC

IFC

IFC layout rules

A, landing the

Block Formatting context (BFC) is a Block level rendering rule for Block Formatting elements. It is also known as a closed container where children in the container do not affect the outside elements.

1. Layout rules of BFC

① The inner boxes will be placed vertically, one by one. The vertical distance of the Box is determined by margin. The upper and lower margins of two adjacent boxes belonging to the same BFC will overlap.

③ The left side of each element touches the left side of the included box, even if there is a float.

The BFC does not overlap with float.

⑤.BFC is an isolated and independent container on the page. The child elements inside the container do not affect the outside elements. And vice versa.

The floating elements are also involved in the calculation of the height of the BFC.

The element that triggers the BFC

The BFC characteristic can be triggered if the element satisfies any of the following conditions

①. Root element.

②. Float property is not None.

③. It is absolute or fixed.

(4). The display of the inline – block; Table – cell; Table – caption; Flex.

⑤. Overflow is not visible.

3. Function and principle of BFC

First of all, let’s look at the adaptive two-column layout and define two divs:

<div class="aside"></div>

<div class="main"></div>

4, then define CSS:

div {\ width:300px; The \}

.aside {\ width: 100px; \ height: 150px; \ float: left; \ background: black; The \}

.main {\ height:200px; \ background-color:red; The \}

The renderings are as follows:

 

This satisfies the third rule of the specification: the left side of each element touches the left side of the included box. This is true even if there is float.

So suppose we need to push the black area to the left of the red. You need to take advantage of article 4 of the specification: the area of the BFC does not overlap with the float.

That means we need to create BFC areas. We trigger the BFC by setting the overflow in the red area to hidden:

.main {\ overflow:hidden; \ height:200px; \ background-color:red; The \}

The effects are as follows:

5. Next look at clearing the internal float

The first is the parent div covering the child div

<div class="parent">
<div class="child"></div>
</div>
Copy the code

6. Then CSS:

.child {
    border:1px solid red;
    width:100px;
    height:100px;
    float:left;
}

.parent {
    border:1px solid black;
    width:300px;
}
Copy the code

The effects are as follows:

As you can see, the parent div is not pushed apart at all. Again, recall article 6 of the BFC specification: When calculating the height of the BFC, floating elements are included in the calculation.

Therefore, we need to trigger the parent div as BFC, that is, set its overflow to hidden:

.parent {
    border:1px solid black;
    width:300px;
    overflow:hidden;
}
Copy the code

The effects are as follows:

You can see that the parent div is already open.

7. Let’s talk about margin overlap again.

Define two vertical divs:

<div class="p"></div>
<div class="p"></div>
Copy the code

Then define margin:

.p {\ width:200px; \ height:50px; \ margin:50px 0; \ background-color:red; The \}

You can see the effect of margin overlap:

 

Let’s look at the second part of the BFC specification:

The vertical distance of the Box is determined by margin, and the upper and lower margins of two adjacent boxes belonging to the same BFC will overlap.

The two divs belong to the same BFC, so we need two divs not belong to the same BFC.

Insert a parent div into the second div. Then set overflow to hidden to activate a BFC to make margins no longer overlap.

<div class="p"></div>

<div class="wrap">

<div class="p"></div>

</div>

.wrap {
overflow:hidden;
}
Copy the code

The effects are as follows:

Second, the IFC

— — — — — — — — — — — — — — — — — — — — — the IFC (Inline Formatting Contexts) literal translation for an Inline Formatting context “,” The height of IFC’s line box is calculated from the actual height of the highest element in the line it contains (not affected by the vertical padding/margin).

Horizontal center: When a block is to be horizontally centered in the environment, setting it to inline-block produces an IFC on the outer layer. Text-align makes it horizontally centered.

Vertical-align :middle: Create an IFC with one of the elements to open the parent and set it to vertical-align:middle. Other elements in the row can be vertically centered below the parent.

IFC layout rules

1. The elements in ifC are arranged in a row from left to right. 2. All elements on a line form a row box in that area.

3. The height of the row width is the height of the containing box, and the height is the height of the highest element in the row box. 4. Floating elements are not in the row box, and floating elements compress the width of the row box.

5. When the width of the row box cannot accommodate sub-elements, the sub-elements will be displayed on the next line and a new row box will be generated.

6. Follow text-align and vertical-align within the elements of the box.

If there are any mistakes in this article, please feel free to correct them in the comments section. If this article has helped you, please like 👍 and follow 😊.