BFC and IFC, BFCIFC

BFC and IFC, BFCIFC

The most important aspect of our webpage is aesthetics. bfc is a Block-level formatting context, which is an independent rendering area. Only Block-level box is involved, it specifies the layout of the internal Block-level Box and has nothing to do with the outside of the area.

Because I am working on Web pages every day, I didn't pay much attention to the principles of bfc and ifc before, so the webpage I made is a little different. Therefore, we must thoroughly learn the following knowledge.

Bfc: The child element in it does not affect the external element.
Add an overflow: hilden. The child element of this element is under a bfc.
As long as a bfc is triggered, it has no impact on the outside.
1. block-level box: block-level box is generated when the display attribute is a block, list-item, and table element. And participate in block fomatting context;

2. inline-level box: the display attribute is inline, inline-block, and inline-table. The inline-level box is generated. And participate in inline formatting context;

Block-level elements are usually vertically arranged in browsers. Then, you can use margin to control the spacing between block-level elements. The parallel and nested block-level elements both have margins, that is, the question of margin merging.

In the row, elements are horizontally arranged. The vertical margin and padding operations are invalid, and the configured width and height are invalid.

It also has some layout rules:

 

While IFC is "inline formatting context", the line box height of IFC is calculated from the highest actual height of the line element.

1. The line box in IFC is usually attached to the entire IFC, but it will be disturbed by the float element. The float element is located between IFC and line box, shortening the line box width.
2. horizontal center: When a block is in the horizontal center, if it is set to inline-block, the IFC will be generated in the outer layer, and the text-align can be horizontally centered.
3. vertical center: Create an IFC, use one of the elements to open the height of the parent element, and set its vertical-align: middle. Other row elements can be vertically centered under the parent element.

The height of multiple line boxes in the same ifc varies. Block-level elements are not allowed in IFC. When block-level elements are inserted (for example, div is inserted in p), two anonymous blocks are separated from div, that is, two IFC are generated, each IFC acts as a block-level element and is perpendicular to the div.