What is landing

BFC is a block-level format context, which refers to an independent block-level rendering area. Only block-level boxes are involved, and this area has a set of rendering rules that constrain the layout of block-level boxes, independent of the external area.

Let’s start with a phenomenon

  • If a parent box does not set height, the height of the parent box is 0 when the content child elements float, and the child box does not support the height of the parent box. The above problem occurs because the parent box does not form a BFC.

The solution

  1. Instead of none, float can be left/right
  2. The value of position is not static/relative
  3. The value of display is inline-block, flex, or inline-flex
  4. Of the four methods, the last one is more practical and works best. It does not affect other layouts
<! doctypehtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BFC</title>
    <style>To solve this problem, create/let the parent box form a BFC. Add the following attributes to fater:1. floatThe value is notnone, can beleft/right
        2. positionIs not static/relative3. displayIs inline-block,flexOr the inline -flex
        4. overflow:hidden
        .father {
            /* float: left;
            position: fixed;
            display: inline-block; * /overflow: hidden;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

Copy the code

Other functions of the BFC

  • You can cancel the margin collapse problem of the box. Here the father gave the height

<! doctypehtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BFC</title>
    <style>
        .father {
            /* float: left; position: fixed; display: inline-block; * /
            overflow: hidden;
            
            
            width: 500px;
            height: 300px;
            background-color: red;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

Copy the code
  • You can organize elements to be covered by floating elements and here the father also gives height

<! doctypehtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BFC</title>
    <style>
        .son {
            float: left;
            width: 200px;
            height: 250px;
            background-color: red;
        }

        .son2 {
            /*float: left; * /
            /*position: fixed; * /
            /*display: inline-block; * /
            overflow: hidden;

            width: 200px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div>
    <div class="son"></div>
    <div class="son2"></div>
</div>
</body>
</html>

Copy the code