Analysis of BFC and IFC

BFCwithIFC

• Are Boxdesigned forformating content

• cssWhen rendered in boxthe basic unit, boxthe type of elements and the type of displayvalue determined. box divided block-level boxandinline-lever box

• formating content: Rules followed by different rendering regions

BFC--Block level formatting context

When will it be formed?

• overflowNot forvisible

• floatNot fornone

• displayforflex table-cell table-caption inline-block inline-flex

• Root element

BFCcharacteristic

• Block-level elements inside the area are placed one after the other vertically

• Area does not overlap with floating element

• The distance between elements is determined by the vertical directionmargin

• If there are both upper and lower elements, there marginwill be overlap

• When calculating the height inside the area, floating elements are also included in the calculation

• Is an isolated container on the page, internal and external does not affect each other

IFC--Inline format context

• inlineElements and layout specifications that theinline-block elements conform IFCto

characteristic

• In the area, inline elements are placed one after another in the horizontal direction.

• Among them, the horizontal direction margin, padding, borderis effective. But not vertically

• All the blocks in a horizontal line form a rectangular area namedline box 行框

• line boxThe height of is calculated from the highest height of the elements it contains. Sometimes it is higher than the highest element, such as when the baseline is aligned. When the line boxheight is greater than the height of the elements, the arrangement of the elements in the vertical direction is verticaldetermined by

• The width is determined by the width of the element that contains it and whether there are floating elements in the element that contains it. If the element containing it is wide enough, line boxthe horizontal arrangement is text-aligndetermined, otherwise it will be line boxtruncated and wrapped. If it line boxcannot be truncated, if the word is too long or if no line breaks are specified, it will overflow the container.