CSS chapter: BFC and IFC

Landing and IFC

Formatting Context

Formatting context is a concept in the W3C CSS2.1 specification. It is a rendering area of the page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements. The most common Formatting contexts are Block fomatting context (BFC) and Inline Formatting context (IFC).

Landing the concept

BFC stands for Block Formatting Contexts
Elements with BFC characteristics can be thought of as separate containers, and the elements inside the container do not affect the layout of the elements outside the container.
And the BFC has some features that normal containers do not.

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 merge.
The left side of the margin box of each box (block box vs. row box) 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.
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.

Trigger landing

Body root element
Float element: float a value other than None
Absolute position elements: Position (Absolute, fixed)
Display inline-block, table-cells, flex, table-caption or inline-flex
Overflow values other than visible (hidden, auto, Scroll)

BFC features and applications

1. Margins of adjacent boxes in the same BFC merge

<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>
Copy the code

Avoid margin merges by placing them in a different BFC container

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

.container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
Copy the code

2. BFC can contain floating elements (clear floating)

If the parent of the floating element does not set the height, the height of the floating element will collapse. If the parent of the floating element sets overflow: Hidden to trigger the BFC of the container, the floating element can be wrapped.

3. The BFC prevents elements from being overwritten by floating elements(Adaptive two-column layout)

Two sibling elements, one floating, will overwrite part of the other element, but the text is not overwritten by the floating element.
You can add overflow: hidden to the overwritten element, and the floating element will not overwrite another element. You can implement an adaptive two-column layout in this way. The floating element on the left has a fixed width, and the element on the right that triggers the BFC has no width, so that its content ADAPTS to the width

IFC concept

Inline formatting Context (IFC) : inline formatting context. ,

IFC layout rules

The boxes are placed horizontally on top of each other, wrapping lines when the container is not wide enough
In the horizontal direction, the space occupied by the outer margin, border and inner margin of these boxes will be calculated, but the vertical border, padding and margin of the inner box will not extend the height of the box
In the vertical direction, the boxes may be aligned in different ways, which can be set with vertical-align, the default alignment is baseline
Each row will generate a line box containing all the boxes in the row. The width of the line box is determined by the containing block and the existing float
The left and right sides of a row box are generally close to its containing block, but this changes with the presence of float elements. The float box is positioned between the edge of the containing block and the edge of the row box, so that the available width of the row box is less than the width of the containing block.
When the total width of all boxes is less than the width of the line box, the horizontal layout in the line box is determined by the text-align attribute
When the total width of all boxes exceeds one row box, multiple row boxes will be formed, which cannot be separated vertically from each other and cannot overlap
When an inline box exceeds the width of the inline box, it is divided into multiple boxes, which are distributed among multiple inline boxes. If an inline box cannot be split (for example, if it contains only a single character, or the word-breaking mechanism is disabled, or if the inline box is affected by a white-space property value of NowRAP or pre), the inline box will overflow the line box
When the margins, Borders, and padding on an inline box are split, the margins, Borders, and padding will not have any visual effects (or any other split, as long as there are multiple margins)
The height of the row box is calculated from the element with the highest actual height in the inner element. The height of each row box may be different because of the different contents
In a row box, the vertical position of the inner container can be determined by its own vertical-align attribute when the height of the inner container is smaller than the height of the row box

Note: there are no block-level elements in an IFC environment. If you insert a block-level element into an IFC, the IFC will be broken into a BFC, and the element or text before the block-level element and the element or text after the block-level element will be automatically surrounded by an anonymous block box.