Understanding CSS Layouts and block-level formatting contexts

Objective

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.

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

.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 solve this problem in two different ways, one is to use the clear hack, which is to insert a div underneath the text and the picture and set its CSS clear property value to both. Another way is to use the overflow property to set it to a value other than the default visible value.

.outer {      overflow: auto;}

box can wrap floating elements after using Overflow:auto.

Overflow is effective because it creates a BFC when it is non-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 gray-background div that contains two paragraphs, a DIV element with a margin-bottom of 40px, and a 20px margin-top and margin-bottom for each paragraph.

.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;} ```由于 p 元素的边缘与 outer 元素的边缘之间没有任何东西，所以 outer 与 p 的 margin 会叠加，p 会与 outer 的顶部与底部齐平，p 对外的 margin 似乎与 outer 的 margin 合并了，使我们无法在段落的上下看到 outer 的灰色背景。![cssbfc1225-4.png](//upload-images.jianshu.io/upload_images/5925829-a3ce76a02b036b6f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)由于 margin collapse（外边距叠加），我们看到 outer 内部上下没有灰色背景如果我们把 outer 元素变成 BFC，它就可以包裹住 p 以及 p 的 margin，外边距不会发生叠加，outer 元素内部就会出现由 p 元素的 margin 顶出来的上下灰色背景。

. 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:

<div class="outer">      <div class="float">I am a floated element.</div>      <div class="text">I am text</div></div>

Elements with the class name float will float to the left of the layout, and a DIV 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 BFC for that element, and the floating element wraps all the elements inside it. 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, where Table-cell and table-caption are the corresponding default CSS for table-related HTML elements Values, so when you create a table, each table cell automatically creates a BFC.

Also, you can create BFC when using multi-column layout (multi-column layouts) with Colum-span:all. 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 Display:flow-root security to create BFC to address the various issues mentioned in this article, including: wrapping floating elements, blocking margin overlays, and blocking wrapping 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.

Copyright belongs to: Front end record

Original address: http://www.ferecord.com/understanding-css-layout-block-formatting-context.html

The original source and this statement must be indicated in the form of a link when reproduced.

Understanding CSS Layouts and block-level formatting contexts