BFC is an independent layout area in CSS, used to control element arrangement and isolate internal and external layout impacts. Its functions and creation methods are as follows: 1. Solve the problem of overlapping margins, avoid margin merging by dividing elements into different BFCs; 2. Clear the impact of floating, so that the parent container correctly wraps floating child elements; 3. Implement adaptive two-column layout, and use overflow: hidden and other features to make the sidebar and content area not interfere with each other; 4. Isolate the internal layout without being affected by external influences, improving structural clarity and controllability. Common ways to create include setting overflow, using floating, absolute positioning, inline-block, flex, or grid layout.

The Block Formatting Context (BFC) of CSS is a basic but easily overlooked concept in front-end layout. Understanding it can help you better control how page elements are arranged, especially when dealing with issues such as floating, overlapping margins, etc.

What is BFC?

BFC is an independent rendering area where block-level elements are laid out according to specific rules and will not affect the layout of external elements. You can imagine it as a "enchant". No matter how much the elements in this enchantment are tormented, they will not affect the outside world.

Common ways to create BFCs include:

• Set overflow value to non- visible values ??such as auto , hidden , etc.
• Use float ( float is not none )
• Absolute positioning element ( position is absolute or fixed )
• Inline block elements ( display: inline-block )
• Elastic box ( display: flex ) or grid layout ( display: grid )

What practical problems can BFC solve?

Prevent margin overlap

In a normal document stream, the upper and lower margins of two adjacent block-level elements will be merged. Sometimes this is not the effect we want. Once these two elements are in different BFCs, their margins will not overlap.

For example, you have a structure like this:

 <div class="box1">Box 1</div>
<div class="box2">Box 2</div>

If .box1 and .box2 are in the same BFC and both have margin-tops set, margin merge may occur between them. But if you create a new BFC for one of the parent containers, this problem can be avoided.

Clear the effect of floating

The floating element would have detached the document stream, causing the parent container to collapse highly. But in a BFC container, it will also include floating elements and automatically extend the height.

For example: a div contains several float:left child elements. If the parent div does not form a BFC, its height may become 0. Just set the parent container overflow: hidden or other ways to trigger BFC, so that the parent container can correctly wrap the floating elements.

Adaptive two-column layout

Using the characteristics of BFC, it is easy to realize a fixed width on the left and an adaptive layout on the right.

For example, on the left is a floating menu bar, and on the right is the content area. The content on the right only needs to simply set overflow: hidden to automatically fill the remaining space and will not overlap with the floating elements.

When should you consider using BFC?

• When you find margin appears unexpected merge
• Floating elements cause layout confusion or parent element height collapse
• Want to quickly implement a simple two-column layout
• The internal layout of elements needs to be isolated and do not want to be affected externally

Basically these scenes. Although BFC looks a bit abstract, it is actually a tool, and it can save a lot of trouble if used well. To master it, there is no need to memorize it, the key is to understand its mechanism of action in different situations.

The above is the detailed content of Understanding CSS block formatting contexts. For more information, please follow other related articles on the PHP Chinese website!