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

In this article, the editor introduces in detail "what is the role of BFC in CSS", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what is the role of BFC in CSS" can help you solve your doubts.

Define

BFC, whose full name is blockformattingcontext, means block-level formatting context, and is the css rendering mode of the box model layout in Web pages.

The above explanation may be a little confused. Generally speaking, BFC refers to the layout of an area. The layout of this area has a remarkable feature: no matter what layout and style the child elements in this area use, they will not affect the external elements. The common use of BFC is to remove the influence of floatation. If the influence of floatation is not known, the height of the parent element will collapse.

So when will BFC be triggered? Meet any of the following conditions:

The value of float is not none

The value of position is not static or relate

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

The value of overflow is not visible

Action

Clear float

We often encounter such a situation: when the child elements contained in a container contain floating elements, the container will have no height. People often use a pseudo class, and then clear the float with the clear attribute in the pseudo class. In fact, you can achieve the same goal by defining a BFC, for example:

.container {

Width:600px

Background-color:black

}

.containerp {

Float:left

Width:200px

Height:200px

Margin-left:10px

Background-color:green

}

After reading this, the article "what is the role of BFC in CSS" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

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.