Writing in the front

A good memory is better than a bad pen. I studied the BFC and found that there are a lot of fine things in it. About BFC, many people may have heard of BFC and probably know what it is, but I believe many people do not have a very detailed understanding of it. This article is expected to be long, serious and patient, so they can have a deeper understanding of the rules, functions and usage of the concept of BFC. I hope my favorite friends can click a like, or pay attention to a wave of myself, thank you.

What the hell is BFC?

BFC overview: Keep this concept in mind – the so-called BFC is a CSS layout concept, is a region, an environment.

Stay calm and keep moving down.

Definition of BFC:

Block formatting context (BFC). It is a separate rendering area, with only block-level boxes participating (explained below), which dictates how the internal block-level box is laid out and has nothing to do with the outside of the area.

The document flow we often say is actually divided into location flow, floating flow and ordinary flow. Normal flow is the FC of BFC.

FC is a rendering area in a page that has a set of rendering rules that determine how its sub-elements are positioned and how they relate to and function with other elements.

Common FCS are BFC, IFC (line-level formatting context), GFC (grid layout formatting context), and FFC (adaptive formatting context), which will not be expanded here.

In a more colloquial way:

A BFC is simply a CSS property of an element that cannot be explicitly modified by the developer. Elements with this property exhibit properties for both internal and external elements. This is a BFC.

Here is a list of directories, and then expand them separately:

Trigger conditions or which elements generate BFC:

The BFC is triggered when one of the following conditions is met

[1] The root element, the HTML element

[2] Float is not none

[3] Overflow is not visible

[4] Display: Inline-block, table-cell, table-caption

[5] The value of position is absolute or fixed

BFC layout rules:

1. The internal boxes will be placed one by one in the vertical direction.

2. The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap

3. The left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.

4. The BFC area does not overlap with the float box.

5. A BFC is a separate container on a page, and the child elements in the container do not affect the outside elements. And vice versa.

6. When calculating the height of the BFC, the floating element also participates in the calculation

What does BFC do:

  1. Adaptive two-column layouts 2 can prevent elements from being overwritten by floating elements 3 can contain floating elements — clear internal float 4. Margin overlap can be prevented when belonging to different BFC

BFC layout rule 1: Internal boxes are placed vertically, one on top of the other.

The block-level box mentioned in the definition above is a block-level box, where a wave is parsed:

This is the composition of our normal operation box

The box we usually say is composed of margin, border, padding and content. In fact, the four edges of each type define a box, which are content Box, padding box, border box and margin box respectively. These four types of boxes always exist, even if they have a value of 0. Margin-box determines the vertical spacing between a block box and its neighbor in the containing block.

Note: The distance between the boxes can also be controlled by using padding, but it is still inside the Box, and the border property cannot be used when using padding.

Layout rule 1 is the way we normally place divs line by line and block by block. You can think about it for a moment, but I won’t expand it here.

BFC layout rule 2: The vertical distance of the Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap.

As mentioned above, it is the margin-box that determines the vertical spacing between a block box and its neighbor in the containing block. That’s the case with the chestnuts on top.

Box: margin-bottom: 100px; Margin-top: 100px; (They are on the same side of the margin, so the margins overlap, and the two divs are actually only 100px apart.)

Function of BFC 4: Prevent margin overlap:

Margin overlap can be prevented when two adjacent block-level child elements belong to different BFC

How to do it: Surround one div with a new one and prevent the margins of the two divs from overlapping by triggering the BFC of the outer div

Here’s the code:

<div class="aside"></div> <div class="text"> <div class="main"></div> </div> <! Aside {margin-bottom: 100px; // Margin attribute width: 100px; height: 150px; background: #f66; } .main { margin-top: 100px; // Margin attribute height: 200px; background: #fcc; }.text{/* The box main contains a div, so that the two boxes belong to two different BFC, so as to prevent margin overlap */ overflow: hidden; // The BFC attribute has been triggered. }Copy the code

Ps: The triggering mode can refer to the triggering conditions given above.

Here’s a website for an online demo to make it a little more intuitive:

It’s also a good article about BFC

Link address: www.cnblogs.com/xiaohuochai…

BFC layout rule 3: The left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.

<div class="par">
    <div class="child"></div>
    // Float these two child divs. The result of the float is that the parent div will not wrap the following two divs if the float is not cleared, but they are still within the parent div's scope.
    <div class="child"></div>
</div>Copy the code

Resolution: The result of floating is that if the float is not cleared, the parent div will not wrap the following two divs, but they will still be within the parent div. Floating left is the left of the child div touching the parent div’s borderbox. Floating right is the right of the child div touching the parent div’s borderbox. This rule is always the case unless margin is set to spread the distance.

BFC function 3: Can contain float elements – clears internal floats

Add overflow: Hidden to parent divPar;

Clearing float principle: The parent div’s BFC attribute is triggered, so that the following child divs are in the same BFC region of the parent div, and the float has been cleared successfully.

You can also float in the same direction to clear a float by having both divs in the same floating BFC region.

BFC layout Rule 4: BFC areas do not overlap with float boxes:

<div class="aside"></div> <div class="text"> <div class="main"></div> </div> <! >. Aside {width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; overflow: hidden; // Trigger main box BFC background: # FCC; } .text{ width: 500px; }Copy the code

The above aside box has a float property that overlays the contents of the main box. The main box does not clear the float of the aside box. It only does one action, which is to trigger its own BFC, and then it’s not covered by the aside box anymore. So: the region of the BFC does not overlap the float box.

BFC function: Adaptive two-column layout.

Again, the BFC area does not overlap with the float box, so it ADAPTS to the width of the containing block (parent div) and the width of the aside.

Landing and Layout

IE as a browser in the bizarre, of course, it is impossible to support the BFC standard step by step, so there is a Layout in IE this thing. Layout and BFC are basically equivalent. In order to deal with the compatibility of IE, when BFC is triggered, we need to use the CSS attribute in the trigger condition to trigger BFC, and use Zoom: 1 to trigger THE Layout of IE.

Interesting text:

 .par {
            margin-top: 3rem;
            border: 5px solid #fcc;
            width: 300px;
        }
        .child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }Copy the code

When I use the above attributes and add a p or SPAN tag with no attributes, I see that the float attribute of the two child divs is automatically cleared. Is this because the span or P text comes with a BFC? Or what? Ask the passing god to explain…

That’s wrong. Here the two divs are split because the parent div is split by the P tag, not because of the cleanup float, as the image below clearly shows.

In fact, the above examples all reflect the BFC layout rule 5 ————

BFC layout Rule 5: THE BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements. And vice versa.

Text surround float:

<div style="float: left; width: 100px; height: 100px; background: #000;">
</div>
<div style="height: 200px; background: #AAA;">
    <div style=" width: 30px; height: 30px; background: red;"></div>
    <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p>
</div>Copy the code

Question: Why is the top left corner of div overwritten, but not the text? Shouldn’t float be on a different level from regular streams? Is it because the float property doesn’t work?

Solution:

Float definition and usage:

The float property defines in which direction the element floats. Traditionally this property has been applied to images to make text surround the image, but in CSS, any element can float. The floating element generates a block-level box, regardless of what element it is.

As you can see from the figure above, the float property does work. After float is hidden, there is a red div underneath, which is covered by a black div. Div is overwritten by float, but text is not, because float was designed to surround the text around the floating object.

The latter

Some of the things mentioned above, in fact, in our ordinary layout, there are already in the use of these rules, but not summed up, if the writing is not good welcome criticism and guidance. There’s another one on closures that I haven’t finished yet. 513 days of playing games! It should be ready soon.

Finally: code word is not easy, thank you for your support! Because I often do not understand others write to share, so personal writing is relatively small white, write bad place, welcome to give advice. Then is the hope of watching the friends point a like, can also pay attention to me. Ps: Currently unemployed in Beijing, I adapt to the fast pace and high intensity of the Internet, continue to learn, continue to grow, serious, rigorous, learning enthusiasm. Small and medium-sized company big guy beg to take away, mailbox: [email protected]. Nuggets homepage, Jane book homepage link, CSDN blog homepage link

Reference links:

What is BFC Block Formatting Context (BFC)

The above. 2017.5.4.