Block Formatting Context (BFC)

Note: landing the first block, and then need to be one of the following conditions can be (pop, landing is just like a 985 or 211 universities, colleges and universities want to be 985 or 211, it is a prerequisite for, first of all, he is a university, not for a primary school, like landing the first block, the next step is to landing; When the prerequisites are met, other conditions need to be met.)

Before getting into the details of BFC, let’s talk about what Box and Formatting Context are:

  • Box

    Box is the object and basic unit of CSS layout. To put it bluntly, a page consists of many boxes. Different types of boxes are involved in Formatting the Context (a container that decides how to render the document), so elements inside the Box are rendered in different ways.

    Common box types:

    • block-level box:displayProperties forblock.list-item.tableElement, is generatedblock-level box. And to participate inblock fomatting context.
    • inline-level box:displayProperties forinline.inline-block.inline-tableElement, is generatedinline-level box. And to participate ininline fomatting context.
    • run-in box: New in CSS3 is a block/inline element mix that makes certain block-level elements the inline part of the next element. Few browsers currently support this element.

  • Formatting context

    Formatting context is a concept in the W3C CSS2.1 specification. It is a rendering area of the page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements.

    Common Formatting context:

    • Block Formatting Context(hereinafter referred to asBFC)
    • Inline Formatting Context(hereinafter referred to asIFC)
    • Only in thisBFC 和 IFCCSS3 has also been addedGFC 和 FFC.

Block formatting context (BFC). It is a separate rendering area, and only the block-level box is involved in creating the BFC. It specifies how the internal block-level box should be laid out, independent of the layout in this separate box, and of course does not affect the elements outside.

Ii. Triggering conditions of BFC:

  1. The root element (the HTML tag in the current document is oneBFC);
  2. floatThe value of thenoneOther attribute values of;
  3. overflowThe value of thevisibleOther property values (yeshidden.auto.scroll);
  4. displayThe value ofinline-block / table-cell / table-caption / flex / inline-flex;
  5. positionThe value ofabsolute 或 fixed;

Iii. BFC features (advantages) and application scenarios

1.boxThe vertical distance is divided bymarginDecide, belong to the sameBFCTwo neighbors ofboxthemarginThere will be overlap

Application scenario: can you explain why margin overlaps and the solution

  • By default, margins of two adjacent boxes overlap because box1 and box2 belong to HTML, and HTML is BFC. Because the MARGIN of two adjacent boxes belonging to the same BFC will overlap, box1 and box2 overlap, i.e. margins overlap.

    By default, the margins of two adjacent boxes overlap:

    <! DOCTYPEhtml>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{margin: 0;padding: 0; }.box1{width: 300px;height: 300px;background: red;margin-bottom: 50px; }.box2{width: 400px;height: 400px;background: yellow;margin-top: 100px; }</style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>	
    </body>
</html>
Copy the code

    As shown in the figure:

  • Solution:

    • After the overlap, you can add a parent element and a declaration to the following elements if you want to avoid the overlapoverflow: hidden;Add other declarations as well, as long as they can be triggeredBFC)
    • The reason it can be resolved is because when you add a parent element to Box2 and addoverflow:hidden;And then, the parent elementboxsisBFCIn the current structure box1 belongs toBFC htmlBox2 belongs toBFC boxsIn which case box1 and box2 are not the sameBFCSo there’s no overlap.

    The specific code is as follows:

    <! DOCTYPEhtml>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{margin: 0;padding: 0; }.box1{width: 300px;height: 300px;background: red;margin-bottom: 50px; }.box2{width: 400px;height: 400px;background: yellow;margin-top: 100px; }.boxs{overflow: hidden; }</style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="boxs">
            <div class="box2"></div>
        </div>
    </body>
</html>
Copy the code

    As shown in the figure: Implementation effect (just add a parent element to Box2 and declare that the BFC is triggered)

2. When calculating the height of the BFC, the floating element is also involved

Application Scenario: Can you explain why height collapse can be solved by overflow: hidden etc.

  • Why overflow: Hidden was added; The height collapse can be solved because ul is triggered as BFC after it is added, and it is stipulated in BFC that when calculating the height of BFC, the floating element is also involved in calculation.

    When UL does not trigger BFC and LI floats, UL height collapses:

    <! DOCTYPEhtml>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body.ul{margin: 0;padding: 0; }ul{border: 3pxsolid red; }ul li{float: left;list-style: none;border: 1pxsolid yellow; }</style>
    </head>
    <body>
         <ul>
         <li>The floating element</li>
         <li>The floating element</li>
         <li>The floating element</li>
         <li>The floating element</li>
         </ul>
    </body>
</html>
Copy the code

    As shown in the figure:

    When you add OVERFLOW: hidden to ul; Ul is BFC, and the float element is used to calculate the height of the BFC:

    <! DOCTYPEhtml>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{margin: 0;padding: 0; }ul{border: 3px solid red;overflow: hidden; }ul li{float: left;list-style: none;border: 1pxsolid yellow; }</style>
    </head>
    <body>
         <ul>
         <li>The floating element</li>
         <li>The floating element</li>
         <li>The floating element</li>
         <li>The floating element</li>
         </ul>
    </body>
</html>
Copy the code

    As shown in the figure:

    Overflow: auto/scroll or display: flex/inline-flex/table can solve the height collapse, also because ul is triggered BFC

3. BFC areas will not work withfloat boxoverlap

Application scenario: Adaptive two-column layout or three-column layout

  • Problem analysis:

    • One element above floats and one element below doesn’t float, so there’s overlap, and the reason is because it doesn’t take up space, so the elements behind it go up;
    • When the following element is addedfloat,overflow,displayThe reason is that after giving these declarations, the following element is triggeredBFCAnd theBFCIt says,BFCRegions do not overlap with floating boxes.
    • If bothBFCThe region is not associated withfloat boxOverlap occurs, and the container on the right ADAPTS:
      • floatCan’t;
      • overflow:hidden,auto,scroll; You can;
      • display:flex,inline-flex; You can.

    Overlap occurs when the upper element is set to float and the lower element is not:

    <! DOCTYPEhtml>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .left {width: 300px;height: 300px;background: red;float: left; }.right {height: 400px;background: yellow; }</style>
    </head>
    <body>
        <div class="left">left</div>
        <div class="right">right</div>
    </body>
</html>
Copy the code

    As shown in the figure:

    When the following element adds a declaration that triggers the BFC, there is no overlap with the floating box:

    <! DOCTYPEhtml>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .left {width: 300px;height: 300px;background: red;float: left; }.right {height: 400px;background: yellow;overflow: hidden; }</style>
    </head>
    <body>
        <div class="left">left</div>
        <div class="right">right</div>
    </body>
</html>
Copy the code

    As shown in the figure:

  • Application Cases:

    • Adaptive two-column layout
    <! DOCTYPEhtml>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body.ul.ol{ margin: 0; padding: 0; }html.body{height: 100%; }.left{width: 300px;height:500px;background: #0000FF;float: left; }.right{height: 600px;background: yellow;overflow: hidden; }</style>
    </head>
    <body>
        <div class="left">Left fixed</div>
        <div class="right">Right adaptive</div>
    </body>
</html>
Copy the code

    The realization effect is shown in the figure below:

    The right adaptive method attributes are: Overflow: hidden, Auto, Scroll; Display: flex, inline – flex;

    • Three column layout
    <! DOCTYPEhtml>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{ margin: 0; padding: 0; }html.body{height: 100%; }.left{
                width: 100px;height: 200px;background: red;float: left;
            }
            .center{
                height: 400px;background: #00FFFF;overflow: hidden;margin-right: 200px;
            }
            .right{
                width: 200px;height: 300px;background: # 008000;float: left;position: absolute;top: 0;right: 0;
            } 
        </style>
    </head>
    <body>
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </body>
</html>
Copy the code

    The realization effect is shown in the figure below:

    Under different resolutions, the left and right sides of the content are fixed, while the middle content is adaptive.

In BFC, the above three features are the most important. Each feature has a wide range of application scenarios and is often used in real development. As for the following three features on a simple understanding of it.

4. Boxes inside the BFC will be placed one by one in the vertical direction.

5. 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), even if there is a float.

6. A BFC is a separate container on the page, and the elements inside the container do not affect the elements outside the container.

That’s the end of the BFC. To summarize, 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.