CSS format context BFC

First, visual format model

Box model is the composition of box generated by elements in CSS, which is generally known as a rectangular area containing margins, borders and content. And the visual format model is to put these boxes on the page according to the rules, which is commonly known as layout. In other words, the visual format model is a model of the entire page, which defines how boxes are placed on the page, how they interact, and so on, and is one of the core concepts of CSS. The W3C standard states that it specifies how the client (browser) handles the Document tree in the medium (monitor).

In the visual format model, each element produces zero or more boxes based on the box model, and the layout of these boxes is influenced by the following factors:

● 1. Box size and type

Type refers to the type of elements determined by the display feature. For example, div is a block-level element, span is an inline element, etc

● 2. Positioning system

During layout, elements are positioned according to three positioning systems. They are normal flow, float, and absolute positioning.

● 3. Relationships between elements in the document tree.

For example, if a block element contains two floating elements that are siblings of each other, the layout of the following floating element is influenced by the previous element and its containing block.

● 4. External information.

For example, the size of the visual window, we sometimes do adaptive window size on the page, just because the size of the window has an effect on layout. Another example is the inherent size of the image, which affects the size of the replacement elements in the line and thus the layout.

The visual format model (standard or specification) does not specify all the details of the format. The client (browser) may behave differently when dealing with formatting situations not covered by this specification. In this section, many new concepts will be introduced: Contains blocks, element types, positioning schemes, Block Formatting Contexts, Inline Formatting Contexts, floating, absolute positioning, Z-ordering, and details of the visual Formatting model, Automatic width height calculation. Here we mainly introduce BFC, IFC, GridLayout Formatting Context (GFC), Flex Formatting Context (FFC). GFC and FFC are new concepts in CSS3.

2. Formatting Contexts

FC is a concept in the W3C CSS2.1 specification. It is a rendering area of a page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements. Simply put, FC is a container that determines how to render a document.

Boxes are the object and basic unit of CSS layout, so to speak, a page is composed of many boxes. The type of the element and the dSIPlay attribute determine the type of the Box. Different types of boxes participate in different FC, so the elements inside the Box will be rendered in different ways.

Block Formatting Contexts

Block-levels participate in BFC, but not all. The standard defines it this way: Floating elements and absolutely positioned elements, block-level containers that are not block-level boxes (such as inline-blocks, table-cells, and table-captions), and block-level boxes that do not have overflow value “unavailable”, Both create new block-level formatting contexts for their content.

Key features of BFC:

● 1. The internal boxes will be placed one after the other in the vertical direction, starting from the top.

● 2. The vertical distance of Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will be superimposed

● 3, the left side of the margin box of each element 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.

● 4, BFC areas do not stack with float boxes.

● 5. The BFC is a separate container on the page, and the child elements in the container do not affect the outside elements and vice versa.

● 6. When calculating the height of BFC, the floating element is also involved in the calculation.

The BFC can be triggered by:

● 1, float specifies a value other than none

● 2, Overflow values except visible (hidden, auto, scroll)

● 3, display (table-cell, table-caption, inline-block, flex, inline-flex)

● 4, Position value is (Absolute, fixed)

● 5. Fieldset elements

The BFC can be created in the above cases.

BFC application scenarios:

1. Solve the problem of margin superposition

The distance between each P is 50px, resulting in margin overlay. This is because the margins of two adjacent boxes belonging to the same BFC will be overlapped. The solution to this problem is to add a new parent element to P and make it trigger BFC.

2. For layout

The left margin of the element touches the left margin of the container containing the block, even if there is a float. The BFC does not stack with the floating box, so we can create a new BFC to solve this problem by setting overflow for the element with class name main as shown below to trigger its BFC.

3. Used to clear floating and calculate the BFC height.

We found that the two child elements inside floating, the relationship between the two box containing block is out of the parent element, the parent element height has collapsed, we need to make the parent element contains two box child elements, so that to calculate the height, two floating child elements will be involved in, so we have to close the floating, the landing of the parent element, the floating element will also participate in the calculation.

You can combine BFC to solve problems related to other scenarios, which are not listed here.

Reference links:

First, visual format model

2. Formatting Contexts

Block Formatting Contexts

Key features of BFC:

The BFC can be triggered by:

BFC application scenarios:

Related Posts

Using ESLint with VUe-CLI

Resolution of window blocking

Review the relationship between invocation, execution, and loading of front-end modules