Shulou(Shulou.com)06/01 Report--

This article focuses on "the method of BFC block-level formatting context". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the method of BFC block-level formatting context.

BFC concept

BFC, or Block Formatting Contexts (block-level formatting context), is a concept in the W3C CSS2.1 specification. It is a rendering area of the page and has a set of rendering rules that determine how its child elements will be positioned, as well as their relationships and interactions with other elements.

Elements with BFC attributes can be thought of as isolated containers, the elements inside the container do not affect the external elements in layout, and BFC has some features that ordinary containers do not have.

Popularly speaking, BFC can be understood as a closed box, no matter how the elements inside the box are turned upside down, it will not affect the outside.

BFC trigger condition

BFC can be triggered if one of the following conditions is met:

The value of float is not none

The value of position is not static or relative

The value of display is inline-block, table-cell, flex, table-caption, or inline-flex

The value of overflow is not visible

The following box box is an BFC stand-alone container:

.box {

Width: 100px

Height: 100px

Overflow: hidden; / * triggers the BFC to form a separate box * /

}

Application of BFC

In the previous introduction to the margin of the box model, there is the problem of transmission and superposition, which can be solved by using the BFC specification. The principle is to let the box form a separate container, no matter how the child elements inside do not affect the outside elements.

.box1 {

Width: 200px

Height: 200px

Background: pink

Overflow: hidden; / * triggers the BFC to form a separate box * /

}

.box2 {

Width: 100px

Height: 100px

Background: skyblue

Margin-top: 30px

}

BFC solves the delivery problem

Section {

Overflow: hidden; / * triggers the BFC to form a separate box * /

}

.box1 {

Width: 200px

Height: 200px

Background: pink

Margin-bottom: 40px

}

.box2 {

Width: 100px

Height: 100px

Background: skyblue

Margin-top: 30px

}

BFC solves the overlay problem

BFC can also solve the problem that the previous float encountered a high collapse of the parent container, that is, no matter whether the inner child element floats or not, it will not affect the container height because it is separated from the document stream.

.box1 {

Width: 200px

Border: 1px black solid

Overflow: hidden; / * triggers the BFC to form a separate box * /

}

.box2 {

Width: 100px

Height: 100px

Background: pink

Float: left

}

At this point, I believe that you have a deeper understanding of "BFC block-level formatting context". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.