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

This article introduces the relevant knowledge of "detailed introduction of BFC in CSS layout". 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!

Catalogue

Preface

Catalogue

What is BFC?

BFC is the mini layout in the layout.

A common way to create a BFC

New ways to create BFC

What is BFC?

A simple floating example can understand the behavior of BFC. In the following example, we create a box element that wraps a piece of text and a floating image. If there is a lot of text, the text will surround the entire floating picture, and the frame of the box will wrap them all.

one

two

three

four

five

six

I am a floated element.

I am text inside the outer box.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

.outer {

Border: 5px dotted rgb (214129137)

Border-radius: 5px

Width: 450px

Padding: 10px

Margin-bottom: 40px

}

.float {

Padding: 10px

Border: 5px solid rgba (214, 129, 137, and 4)

Border-radius: 5px

Background-color: rgba (233, 78, 119, 4)

Color: # fff

Float: left

Width: 200px

Margin: 0 20px 0 0

}

Text surrounds floating elements

But if you delete some text, there is not enough text to float the element around the picture, and as the floating element leaves the document stream box element, the border height decreases as the text decreases.

Without enough text, the height of the border of the box element will be lower than the height of the floating element.

This happens because when we float an element, the box element retains its original width because the text takes up less space to make room for the floating element, which is why the background and border can appear to wrap the floating element.

We usually use two different ways to solve this problem. One way to solve this problem is to use clear hack by inserting a div below the text and image and setting its CSS clear property to both. Another way is to use the overflow attribute to set it to a value that is not the default value visible.

one

two

three

four

five

.outer {

Overflow: auto

}

After using overflow: auto, box can wrap floating elements

Overflow works because it creates a BFC when it is a non-visible, and one of the functions of BFC is to wrap floating elements.

BFC is the mini layout in the layout.

You can think of BFC as a small layout in your page when an element is created as BFC and all its elements are wrapped by it. As we can see, when the box element becomes BFC, its floating elements never break through its bottom. In addition, BFC has some useful features.

BFC can block outer margin overlay margins collapsing

Understanding outer margin overlay is another undervalued CSS technique. In the following example, I create a div with a gray background. This div contains two paragraphs with the margin-bottom of the div element is 40px and each paragraph has 20px's margin-top and margin-bottom.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

.outer {

Background-color: # ccc

Margin: 0 0 40px 0

}

P {

Padding: 0

Margin: 20px 0 20px 0

Background-color: rgb (233Magne78119)

Color: # fff

}

Since there is nothing between the edge of the p element and the edge of the outer element, the margin of outer and p will be superimposed, p will be flush with the top and bottom of outer, and the external margin seems to merge with outer's margin so that we can't see the gray background of outer at the top and bottom of the paragraph.

Due to the margin collapse outer margin overlay, we can see that there is no gray background inside the outer.

If we change the outer element to BFC, it can wrap p and the margin margin of p without superposition. Inside the outer element, there will be an upper and lower gray background ejected by the margin of the p element.

one

two

three

four

five

six

seven

.outer {

Background-color: # ccc

Margin: 0 0 40px 0

Overflow: auto

}

The outer margin is no longer superimposed after the establishment of BFC.

Once BFC establishes it, it will prevent its internal elements from escaping and breaking through it.

A BFC will stop circling the floating element

You are probably familiar with this feature of BFC, which we often use in column type layouts with floating elements. If an element creates a BFC, it will not wrap or wrap any floating elements. Look at the following example

one

two

three

four

five

six

I am a floated element.

I am text

The class element named float will float on the left side of the layout. The class div element named text will follow it and surround it.

Text surrounds floating elements

We can block this wrapping behavior by creating a BFC for the text element.

one

two

three

four

five

.text {

Overflow: auto

}

After the text element establishes the BFC, it no longer surrounds the floating element

This method is also the basic way we create floating layouts. It is also important to note that floating an element also creates a BFC for that element, that is, .float and .text are BFC at this time, which is why they do not surround each other whether the height on the right is lower or higher than that on the left.

A common way to create a BFC

In addition to using overflow, some other CSS attributes can also create BFC, such as floating an element we saw above, or you can create a BFC floating element for that element that wraps all the elements inside it. There are several ways to create a BFC

Use position: absolute or position fixed.

Use display: inline-block, display: table-cell or display: table-caption, where table-cell and table-caption are the default CSS values for table-related HTML elements, so when you create a table, each table cell automatically creates a BFC.

You can also create a BFC using colum-span: all when using multi-column layout multi-column layouts. Elements in Flex resilient and Grid grid layouts also automatically create BFC-like mechanisms except that they are called Flex Formatting Context elastic format contexts and Grid Formatting Context (grid format contexts). This reflects the type of layout they participate in. An Block Formatting Context block-level format context indicates that its internal elements participate in the block-level layout. An elastic format context means that its internal elements participate in the elastic layout. In practice, the result of these layouts is that similar floating elements are wrapped and the outer margins are not superimposed.

New ways to create BFC

There are two problems when creating a BFC using overflow or other methods. The first is that these methods themselves have their own design purpose, so they may have side effects when using them to create BFC. For example, after creating a BFC using overflow, in some cases you may see a scroll bar or element content cut. 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.

Another problem is that using overflow without side effects can confuse another developer. They may wonder why the value of overflow is set to auto or scroll. Does the original developer want a scroll bar here?

The safest thing to do is to create a BFC without any side effects-the internal elements are safe and safe in this small layout-this method does not cause any unexpected problems and makes the developer's intentions clear. The CSS working group agrees with this idea, so they customize a new attribute value, display: flow-root.

You can use display: flow-root to securely create BFC to solve the various problems mentioned in this article, including wrapping floating elements, preventing outer margins from overlaying, and preventing surround floating elements.

Display on caniuse: support of flow-root browsers

Browser support for this property value is currently limited. If you find this property value convenient, please vote for Edge to support it. But 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 if you want to use elastic or grid layouts you can use these features of BFC in browsers that do not support them.

It is very basic to understand how browsers arrange web pages. Although it may seem trivial at times, this little knowledge can speed up the time required to create and debug CSS layouts.

This is the end of the detailed introduction of BFC in CSS layout. Thank you for your 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.