How to understand CSS layout and block-level formatting contexts _css Tutorial _css_ Web Authoring

This article mainly describes how to understand the CSS layout and block-level format context of the relevant information, small series feel very good, and now share to everyone, there is CSS source code, but also for everyone to do a reference. The little friends who are interested in CSS come along and look at it.

BFC concept began in CSS2, is a pretty old CSS topic, the Internet can be searched everywhere BFC Introduction, but not concise. This article is translated from Rachel Andrew's blog post Understanding CSS Layout and the Block formatting context, the content is concise and clear enough.

The purpose of this article is to introduce some concepts to help you enhance your CSS code force. As the title shows, this article is mainly about block-level format contexts (bfc,block formatting context) . You may not have heard the term, but as long as you've used CSS layouts, you can understand it. It is very useful to understand what BFC is, how it works, and how to create a BFC that will help you understand the CSS layout better.

In this article, I'll explain BFC through a few examples that you'll be familiar with. I'll also show you a new display value that you might need when you understand 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 picture. If the text is more than the text will surround the entire floating picture, box's border will wrap them all up.

<p class= "outer" ><p class= "float" >i am a floated element.</p>i am text inside the outer box.</p>

. outer {      border:5px dotted rgb (214,129,137);      border-radius:5px;      width:450px;      padding:10px;      margin-bottom:40px;}. float {      padding:10px;      border:5px solid Rgba (214,129,137,.4);      border-radius:5px;      Background-color:rgba (233,78,119,.4);      Color: #fff;      Float:left;        width:200px;      margin:0 20px 0 0;}

Text wraps around floating elements

But if some text is deleted, there is not enough text to surround the picture (floating element), and since the floating element is out of the document flow, the bounding height of the box element will decrease with the decrease of the text.

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

This happens because when we float an element, the box element remains the same width, and the space occupied by the text is shortened to make room for the floating element, which is why the background and border can appear to wrap around the floating element.

We usually use two different ways to solve this problem, one is to use the clear hack, which is to insert a p below the text and the picture and set its CSS clear property to the value both . Another way is to use a overflow property to set it to a value other than visible the default value.

. outer {      Overflow:auto;}

Make

overflow: auto you can wrap a floating element with a box.

Overflow is effective because it creates a BFC when it is right visible , and one of BFC's functions is to wrap floating elements .

BFC is a mini-layout in the layout

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

BFC can block margin overlays (margins collapsing)

Understanding the margin overlay is another underrated CSS trick. In the following example, I created a background gray p, which contains two paragraphs, the P element has a margin-bottom of 40px, and each paragraph has 20px margin-top and Margin-bottom.

. outer {       background-color: #ccc;      margin:0 0 40px 0;} p {      padding:0;      margin:20px 0 20px 0;      Background-color:rgb (233,78,119);      Color: #fff;}

Since there is nothing between the edges 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 of the outer, and P's margin appears to be merged with the outer margin, so that we cannot Up and down to see the gray background of outer.

Because of the margin collapse (margin overlay), we see no gray background inside the outer

If we turn the outer element into a BFC, it can wrap the margin of p and p, and the margin will not overlap, and the outer element will appear in the upper and lower gray background from the margin of P element.

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

When the BFC is established, the margin is no longer superimposed

Once BFC is established, it blocks its internal elements from escaping through it.

A BFC will stop going around floating elements

You may be familiar with this feature of BFC, which we often use in the layout of column types with floating elements. If an element creates a BFC, it doesn't wrap around (or wrap it up). ) any floating element. Look at the following example:

<p class= "outer" >      <p class= "float" >i am a floated element.</p> <p      class= "text" >i am Text</p></p>

Elements with the class name float will float to the left of the layout, and the P element with the class name text will be behind it and surround it.

Text wraps around floating elements

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

. text {      Overflow:auto;}

The text element does not surround the floating element after the BFC is established.

This method is also the basic way for us to create a floating layout. It is also important to note that when you float an element, you also create a BFC for the element, that is, the. float and. Text are BFC, which is why both the right and the left are not around each other.

A common way to create a BFC

In addition to using overflow , some other CSS properties can also create BFC, as we see above, floating an element can also create a BFC for the element, the floating element will wrap its internal elements. There are several ways to create the BFC:

Use position: absolute or position： fixed .

Use display: inline-block , display: table-cell or display: table-caption , which table-cell table-caption is the corresponding default CSS value for the HTML elements of the table, so when you create the table each table cell will automatically create the BFC.

colum-span: allAlso, you can create BFC when using multi-column layout (multi-column layouts). The elements in Flex (elastic) and grid (grid) layouts also automatically create mechanisms like BFC, except that they are called Flex formatting context (elastic format context) and grid formatting context (grid format contexts). This reflects the type of layout they are participating in. A block formatting contextual (block-level format context) indicates that his internal elements participate in block-level layout, and an elastic format context means that the elements inside it participate in the elastic layout. In practice, the results of these layouts are similar, and the floating elements will be wrapped and the margins will not overlap.

New ways to create BFC

There are two issues when creating BFC using overflow or other methods. The first is that these methods themselves are designed for their own purposes, so they can have side effects when using them to create BFC. For example, after you create BFC with overflow, in some cases you may see a scroll bar or element content being cut. This is because the overflow property is designed to let you tell the browser how to define an overflow state for an element. The browser executes its most basic definition.

Another problem is that using overflow can be confusing to another developer even when there are no side effects. They may wonder: why do you want to set the value of overflow to auto or scroll? What is the meaning of the original developer? Did the original developer want the scroll bar to appear here?

The safest way to do this is to create a BFC without any side effects, and the elements inside of it are all safely in this small layout, which does not cause any unexpected problems or makes the developer's intentions clear. CSS workgroups also agree with this idea, so they customize a new attribute value: display: flow-root .

You can use the display: flow-root secure create BFC to address the various issues mentioned in this article, including: wrapping floating elements, preventing margin overlays, and preventing wrapping of floating elements.

Caniuse on Display:flow-root Browser support situation

The browser's support for this property value is still limited, and if you think this property value is convenient, please vote for the Edge to support it. However, you should now understand what BFC is, how to use overflow or other methods to wrap floats, and know that BFC can prevent elements from wrapping around floating elements if you want to use elastic or grid layouts that can be used in browsers that do not support them BFC Of these features to do degraded processing.

It is very basic to understand how a browser can lay out web pages. While sometimes seemingly irrelevant, these tips can speed up the time it takes to create and debug CSS layouts.