How to create block-level formatting context? The role of block-level formatting context

What is block-level formatting context in css? Block Formatting Context is part of the visual rendering of CSS on web pages and is used to determine the layout of block boxes. In the Positioning Scheme, it belongs to the Normal Flow. So how to create a block-level formatting context? What are the requirements to create block-level formatting? This article will explain it to you one by one.

FC (Formatting Context) translates to formatting context/formatting range, which refers to an area in the page layout. It has its own rendering rules and determines how its own sub-elements are laid out. and its relationship and role with other elements.

According to CSS display classification, xhtml elements are divided into three types: block elements, inline elements, and variable elements. When adding styles to page elements, we need to know what type the element is, and then we can convert the element type ourselves. Just like we can use display to turn an inline element into a block element (display: block). There are several special elements img, and input is inline-block by default;

What is a block formatting context (BFC)? Equivalent to a special area.

If an element meets the conditions for becoming a BFC, the element becomes an isolated independent container. The internal elements of the element will be arranged vertically along the border of its parent element, and will not affect each other's external elements. .

The conditions for triggering BFC are as follows:

1. Floating elements, float values ​​other than none

2. Absolutely positioned elements, position (absolute , fixed)

3. display is one of the following values: inline-blocks, table-cells, table-captions. //It is a block container that is not a block-level box

4. Overflow values ​​other than visible (hidden, auto, scroll)

If one of the above four conditions is met, it can be created Block-level formatting context, the environment in which the content is located is the environment of the block-level formatting context.

In CSS3, BFC is called Flow Root, and some trigger conditions are added:

1, display table-caption value

2, The fixed value of position is actually a subclass of absolute, so using this value in CSS2.1 will also trigger BFC, but this is made clearer in CSS3.

The element sets the IE-specific CSS attribute zoom: 1 to trigger hasLayout. zoom is used to set or retrieve the zoom ratio of the element. A value of "1" means using the actual size of the element. Using zoom: 1 both It can trigger hasLayout without causing other effects on the elements, which is relatively more convenient. This is the situation under IE

The role of block-level formatting context (BFC):

(1) BFC will prevent margins from folding

I understand that folding means that the outer margins will overlap and will not be clearly distinguished, just like what's yours is mine, and what's mine is yours.

Rules for margin collapse: Only when two block-level elements are adjacent and in the same block-level formatting context, the vertical margins between them will overlap. That is, even if two block-level elements are adjacent, their margins will not collapse when they are not in the same block-level formatting context. Therefore, preventing margins from collapsing simply results in a new BFC.

But for two adjacent elements, it doesn’t mean much. There is no need to add a shell to them, but it is necessary for nested elements. Just set the parent element to BFC. . In this way, the margin of the child element will not collapse with the margin of the parent element.

(2) BFC can contain floating elements

This means that sub-elements in BFC will not exceed its containing block, while elements with absolute position can exceed it. The containing block border

(3) BFC can prevent elements from being covered by floating elements

This is based on the left side of the margin box of each element, and the containing block border box touch the left side of (for left-to-right formatting, otherwise vice versa). This is true even if there is float. This principle is realized.

Recommended related articles:

CSS > Translation: Understanding block-level formatting context in CSS_html/css_WEB-ITnose

CSS understands block-level formatting context BFC

Detailed explanation of the working principles of block formatting context (block formatting context), floating and absolute positioning_html/css_WEB- ITnose

The above is the detailed content of How to create block-level formatting context? The role of block-level formatting context. For more information, please follow other related articles on the PHP Chinese website!