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

This article mainly introduces "what is the role of BFC in css". In daily operation, I believe that many people have doubts about the role of BFC in css. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the question of "what is the role of BFC in css?" Next, please follow the editor to study!

What is BFC (BlockFormattingContext)

Formattingcontext (formatting context) is a concept in the W3CCSS2.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.

BlockFormattingContexts (BFC, block-level formatting context) is a rule for rendering and displaying block-level 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.

The layout rules of BFC are as follows:

1. The inner boxes will be placed vertically, one by one.

   2.BFC is an isolated container on the page

3. The upper and lower margin of two adjacent Box belonging to the same BFC will overlap.

4. Floating elements also participate in the calculation when calculating the height of the BFC

5. The left side of each element is in contact with the left side of the contained box, even if there is a float

The area of    6.BFC does not overlap with float

So how do you trigger BFC? The BFC feature can be triggered as long as the element meets any of the following conditions:

Body root element

Floating element: float is not an attribute value of none

Absolute positioning elements: position (absolute, fixed)

Display is: inline-block, table-cells, flex

Overflow values other than visible (hidden, auto, scroll)

What on earth is the use of BFC?

The block formatting context is important for locating and clearing floats. The style rules for positioning and clearing floats apply only to elements in the same formatting context.

1. The outer margin will fold under the same BFC.

That is, the margin in the vertical direction of the block element in two adjacent normal streams collapses.

.p {

Width:200px

Height:50px

Margin:100px0

Background-color:red

}

Here the outer margin of the two p is 100px, not 200px. Outer margin folding occurs because they both belong to the root element body.

MarginCollapse can be eliminated by using BFC

BFC led to margincollapse, and now we need to use it to solve margincllapse. But always keep in mind that vertical margin will clollpase only if the element is in the same BFC. If they belong to different BFC, there will be no margincollapse. So we can build another BFC to prevent margincollpase from happening.

.wrap {

Overflow:hidden

}

.p {

Width:200px

Height:50px

Margin:100px0

Background-color:red

}

2. BFC can contain floating elements (clear floating)

Normally, floating elements deviate from the normal document stream, causing the parent element to collapse highly. That is, the outer p cannot contain the internally floating p.

But if we trigger the BFC of the external container, according to Article 4 of the BFC specification: when calculating the height of the BFC, the floating element is also involved in the calculation, then the external p container can wrap the floating element.

3. BFC can prevent elements from being overwritten by floating elements / (two-column layout)

At this point, the study on "what is the role of BFC in css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.