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

When we first learned CSS, we learned a lot of interesting CSS rules, such as margin collapse, some characteristics of floating elements, and so on. In fact, behind these rules, BFC is controlled. Let's take a look at what BFC is.

What is BFC?

BFC (Block formatting contexts), which translates to block-level formatting context, refers to a context. Regardless of why it is called such an obscure and lengthy name, let's take a look at what forms BFC, and then see what features it has, so we know what it is. Just as we learn about js objects, we know the prototype of an object and its property methods, and we know what it is.

How to form BFC

According to the W3C definition: floating elements, 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 attribute value is not "visible" (except viewports) (visible is the default value for overflow), these elements create a BFC for their content.

Characteristics of BFC

In a BFC, vertically, boxes are laid out next to each other from the top of the containing block, the vertical distance between two adjacent boxes is determined by the margin attribute, and the vertical outer margin of two adjacent block-level boxes in a BFC will collapse.

In a BFC, horizontally, the left edge of each box touches the left edge of the containing block (the opposite is true in the right-to-left format). Unless the floating element interacts with other elements (when there is a floating element, the row box may shrink due to the floating element, and if a box forms a new BFC, the box may also be narrowed by the floating element).

So we finally know why we set so many conditions when we talk about margin collapse in "mastery CSS":

Block-level elements in the document stream

Vertical outer margins meet directly

The first condition is to prevent the formation of BFC. We should note that the outer margin collapse can be formed between the child elements within the BFC, but the outer margin collapse can not be formed between the BFC element and other block-level elements.

Application of BFC

There are many application scenarios of BFC. Here are some of my thoughts.

Clear the influence between elements

If you want one element to be unaffected by another, you can put one of the elements in the BFC environment.

Eg: we all know that text is laid out around floating elements, as shown in the following figure

.out {width: 200px; height: 200px; border: 1px solid blue;} .f {width: 50px; height: 50px; background: red; float: left } I am the text.

What if we don't want to surround the text, but just want the text to be on the right?

You just need to coat the text with an element and change that element to BFC so that the text is not affected by floating elements. I am here to change the overflow attribute to make the element where the text resides to form a BFC.

.out {width: 200px; height: 200px; border: 1px solid blue;} .f {width: 50px; height: 50px; background: red; float: left;} .inner {overflow: auto } I am the text.

One of the ways to prevent the outer margin collapse between block-level elements is to use the first condition just mentioned, which is the same principle, to form a BFC, which we will not talk about here.

Clear the influence of internal floating elements on parent elements

Eg:

.out {border: 1px solid blue;} .f {width: 50px; height: 50px; background: red; float: left;}

Effect picture:

If you want an external element to contain a floating element, simply set the external element to BFC

.out {overflow: auto; border: 1px solid blue;} .f {width: 50px; height: 50px; background: red; float: left;}

Effect picture:

Create an adaptive layout

If we want to create a two-column layout where the width on the left is variable and the width on the right adaptively takes up the rest of the space, one way is to make use of the interaction between floating elements and BFC elements.

Html,body {width: 100%; height: 100%;} .out {background: blue; width: 100%; height: 100%;} .f {float: left; margin-right: 20px; height: 100%; background: red;} .r {overflow: auto; height: 100%; background: yellow } floating element

Effect picture:

Summary

BFC is the principle behind many CSS specifications, so it is necessary to understand BFC.

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.