CSS box model: BFC, IFC margin Overlay solution

BFC: block-level formatting context

IFC: Inline Formatting context

Examples are as follows:

<div class= "Out" style= "background:red;" >
<div class= "in" style= "height:100px; margin-top:10px; Background:green; " ></div>
</div>

At this point, both out and in heights are 100px.

Abnormal condition: But out is blocked by in, and there is a 10px gap on the top.

Solution: We add Overflow:hiddento out, the out is blocked and the 10px blank is not, but the out height also becomes 110px.

This anomaly is known as margin overlap, BFC is block-level margin overlap, and ifc is the margin overlap of the elements in the row.

The above is a parent-child element of the margin overlap, there are two cases of sibling elements of the margin overlap, empty elements of the margin overlap.

1. The margins of the sibling elements overlap. Where the sibling elements intersect, margin takes a larger value as the margin of the two.

2. Margin problems for empty elements. When an empty element sets a different upper and lower margin, it takes a larger value to make his final margin.

Under what circumstances will css create a BFC?

When the float value is not none
Position value is not relative or static
Display for Table,table-cell
When the overflow value is Hidden,auto

CSS box model: BFC, IFC margin Overlay solution