CssBFC (Block-level module context)

First, what is BFC

Block Formatting Context (BFC) is a CSS rendering mode for the layout of a box model in a Web page. It refers to an independent rendering area or an isolated independent container.

2. Conditions for the formation of BFC

Float element, float value other than None; 2. Position (Absolute, fixed); 3, display as one of the following inline-block, table-cell, table-caption; 4, Overflow values except visible (hidden, auto, scroll);Copy the code

Iii. Characteristics of BFC

1. The internal boxes will be placed one after another in the vertical direction. The vertical distance is determined by margin. The BFC area does not overlap the float element area. 5. The BFC is a separate container on the page, and its children do not affect the outside elements.Copy the code

(1) Box alignment in BFC

The first feature is that the internal boxes are placed vertically on top of each other.

Float elements do the same, box3 floats, and it still follows the previous box vertically. And all the boxes are left aligned.

html

<div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
Copy the code

css

div { height: 20px; } .container { position: absolute; /* Create a BFC environment */ height: auto; background-color:#eee;
        }
        
        .box1 {
            width: 400px;
            background-color: red;
        }
        
        .box2 {
            width: 300px;
            background-color: green;
        }
        
        .box3 {
            width: 100px;
            background-color: yellow;
            float: left;
        }
        
        .box4 {
            width: 200px;
            height: 30px;
            background-color: purple;
        }
Copy the code

(2) margin folding

The second feature: the vertical distance is determined by margin

In normal document flow, the vertical distance between two sibling boxes is determined by their margins, but not by the sum of their two margins, but by whichever is greater.

html

    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
Copy the code

css

.container {
            overflow: hidden;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .box1 {
            height: 20px;
            margin: 10px 0;
            background-color: green;
        }
        
        .box2 {
            height: 20px;
            margin: 20px 0;
            background-color: green;
        }
Copy the code

Here we can see that the first box has a top margin (no margin penetration problem); The vertical distance between the two subboxes should be 20px instead of 30px, because the vertical margins fold, whichever is larger.

So is there a way to make the vertical margins not fold? The answer is: yes. The BFC is a separate container on the page. The child elements in the container do not affect the outside elements, and the outside elements do not affect the elements in the BFC. So just let Box1 or Box2 be in another BFC.

 <div class="container">
        <div class="wrapper">
            <div class="box1"></div>
        </div>
        <div class="box2"></div>
    </div>
Copy the code

css

.container {
        overflow: hidden;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    .wrapper {
        overflow: hidden;
    }
    
    .box1 {
        height: 20px;
        margin: 10px 0;
        background-color: green;
    }
    
    .box2 {
        height: 20px;
        margin: 20px 0;
        background-color: green;
    }
Copy the code

(3) Not covered by floating elements

Take the common two-column layout.

The left side has a fixed width and the right side has no width, so the right side has an adaptive width that changes with the browser window size.

html

  <div class="column"></div>
    <div class="column"></div>
Copy the code

css

  .column:nth-of-type(1) {
            float: left; width: 200px; height: 300px; margin-right: 10px; background-color: red; } .column:nth-of-type(2) { overflow: hidden; /* create BFC */ height: 300px; background-color: purple; }Copy the code

There is also a three-column layout.

The left and right sides are fixed with no width in the middle, so the middle width ADAPTS to the size of the browser.

html

 <div class="contain">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>
Copy the code

css

  .column:nth-of-type(1),
        .column:nth-of-type(2) {
            float: left;
            width: 100px;
            height: 300px;
            background-color: green;
        }
        
        .column:nth-of-type(2) {
            float: right; } .column:nth-of-type(3) { overflow: hidden; /* create BFC */ height: 300px; background-color: red; }Copy the code

Can also be used to prevent font wrapping:

It is well known that the floating box hides the bottom box, but the text inside the bottom box is not hidden, and instead the text wraps around the floating box. This is also an interesting feature.

html

 <div class="left"></div> <p> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello Hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello helloCopy the code

CSS:

(1) Surround

 .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        
        p {
            background-color: green;
            /* overflow: hidden; */
        }
Copy the code

(2) Use BFC to prevent surround

 .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        
        p {
            background-color: green;
            overflow: hidden;
        }
Copy the code

(4) BFC contains floating blocks

This is a familiar one: use Overflow: Hidden to clear floats, because floating boxes cannot outheight the parent box in the standard document flow. This is no more than the explanation, I believe you already understand.

<style>
     
        
     .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
          
          
        }
      .leftm{
        overflow:hidden
      }
     
    </style>


<body>
    <div class="leftm">
            <div class="left"></div>
    </div>
 
        
      
</body>
Copy the code