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

This article introduces the relevant knowledge of "how to understand CSS layout and BFC". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

What is BFC?

In the CSS rendering of a Web page, the block-level formatting context (Block Fromatting Context) is laid out as a block-level box. The W3C defines BFC as follows:

Floating and absolute positioning elements, block-level containers that are not block-level boxes (such as inline-blocks, table-cells, and table-captions), and block-level boxes whose overflow value is not "visiable" all create new BFC (block-level format context) for their content.

BFC is an independent layout environment in which the layout of elements is independent of the outside world, and in a BFC, block boxes and row boxes (row boxes are made up of all inline elements in a row) are arranged vertically along the borders of their parent elements.

The behavior of a block formatting context (BFC) is easily understood by a simple float example. In the following example, I have a box that contains an image floating to the left and some text. If we have enough text, it will wrap around the floating image and border, and then around the entire area.

/ / html I am a floated element. I am text inside the outer box. / / css .outer {border: 5px dotted rgb (214129137); border-radius: 5px; width: 450px; padding: 10px; margin-bottom: 40px;} .float {padding: 10px; border: 5px solid rgba (214 fff; float: 129); border-radius: 5px; background-color: rgba (233 fff; float: left; width: 200px; margin: 0 20px 00;}

If I delete some text, there is not enough content to surround the image, and because the float is detached from the document stream, the border rises and is below the image to the height of the text.

This is because when we float an element, the width of the box in which the text is located remains the same, and the line box of the text is shortened to make room for the floating element. This is why the background and border appear after the float.

We usually have two ways to solve this layout problem. One way is to use clearfix hack, which inserts an element under the text and image and sets it to clear:both. Another way is to use the overflow attribute, whose value is not the default value of visible.

.outer {overflow: auto;}

View presentation

The reason overflow works this way is that using anything other than the initial value of visible creates a block formatting context, and one feature of BFC is that it contains floats.

BFC is a mini layout in a layout.

You can think of BFC as a mini layout within a page. Once an element creates a BFC, it contains everything. As we can see, this includes floating elements that no longer protrude from the bottom of the box. BFC can also lead to other useful behaviors.

BFC prevents margin from folding

Understanding margin merging is another undervalued CSS skill. In the next example, suppose you have a div with a gray background.

This div contains two tags p. The margin-bottom of the external div element is 40 pixels, and the top and bottom margin of label p is 20 pixels.

/ / html

I am paragraph one and I have a margin top and bottom of 20px

I am paragraph one and I have a margin top and bottom of 20px

/ / css .outer {background-color: # ccc; margin: 0 40px 0;} p {padding: 0; margin: 20px 0 20px 0; background-color: rgb (233 fff; 78119); color: # fff;}

Because there is nothing between the margin of the p element and the margin on the outer div, the two collapse, so p ends up flush with the top and bottom of the div. We don't see any gray above and below p.

In CSS, the outer margins of two adjacent boxes (either brotherly or ancestral) can be combined into a separate outer margin. This way of combining the outer margin is called folding, and the resulting outer margin is called the folded outer margin. The result of folding is calculated according to the following rules:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

When two adjacent outer margins are positive, the result of folding is a larger value between them.

When the two adjacent outer margins are negative, the folding result is the larger absolute value of both.

When the two outer margins are positive and negative, the folding result is the sum of the two.

A prerequisite for folding: margin must be adjacent!

If we set the box to BFC, it now contains the label p and their margins so that they do not collapse, and we can see the gray background of the container behind the margins.

.outer {background-color: # ccc; margin: 0 40px 0; overflow: auto;}

View presentation

Once again, BFC's job is to put things in boxes to prevent them from getting out of the box.

BFC can prevent elements from being overwritten by floating elements

You will be familiar with this behavior of BFC, because any column type layout that uses floats works this way. If a project creates a BFC, the project will not wrap any floating elements. In the following example, there is the following html structure:

I am a floated element. I am text

The item with the float class floats to the left, so the text in the div follows it around the float.

I can prevent this wrapping behavior by setting the div of the package text to BFC.

.text {overflow: auto;}

This is actually the way we create a floating layout with multiple columns. The floating item also creates a BFC for the item, so if the column on the right is higher than the column on the left, then our columns will not surround each other.

View presentation

Using BFC in a multi-column layout

If we create a multi-column layout that takes up the entire width of the container, in some browsers, one column sometimes falls to the next row. This may be because the browser rounds the column width so that the total width of all columns exceeds the container. But if we create a new BFC in the * * column in a multi-column layout, it will always take up the space left after the other columns have been occupied first.

For example:

Column 1 column 2 column 3

Corresponding CSS:

.column {width: 31.33%; background-color: green; float: left; margin: 0.1%;} .column:last-child {float: none;}

Before creating a BFC:

Add the following styles to create a BFC:

. column:last-child {float: none; overflow: hidden;}

Now, although the width of the box has changed slightly, the layout will not be broken. Of course, this is not necessarily a good idea for multi-column layouts, but it can avoid falling in one column. Elastic boxes may be a better solution to this problem, but this approach can be used to illustrate the behavior of elements in these environments.

What else can create BFC?

In addition to using overflow to create BFC, some other CSS properties also create BFC. As we can see, the floating element creates the BFC. Your floating item will contain anything in it.

You can create a BFC in all of the following ways

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

New ways to create BFC

There are two problems when creating a BFC using overflow or other methods. First of all, these methods themselves have their own design purpose, so there may be side effects when using them to create BFC. For example, you may see a scroll bar or element content trimmed in some cases after creating a BFC using overflow.

This is because the overflow attribute is designed to let you tell the browser how to define the overflow state of an element. The browser implements its most basic definition.

Even without any unwanted side effects, using overflow can confuse other developers. Why is overflow set to auto or scroll? What was the intention of the original developer? Do they want the scroll bar on this component?

The safest thing to do is to create a BFC without any side effects, its internal elements are safely in the mini layout, this method will not cause any unexpected problems, but also can understand the intention of the developer. The CSS working group agreed with this idea, so they customized a new attribute value: display:flow-root.

Flow-root browser support

You can use display:flow-root to securely create BFC to solve all the problems mentioned above: wrapping floating elements, preventing margins from overlaying, and blocking floating elements around them.

Browser support for this attribute is currently limited, and if you find it convenient, please vote for Edge to support it. In any case, you should now understand what BFC is, and how to use overflow or other methods to wrap floats, and know that BFC can prevent elements from wrapping floating elements, and if you want to use elastic or grid layouts, you can use these features of BFC in browsers that do not support them to downgrade.

This is the end of "how to understand CSS layout and BFC". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.