当前位置：网站首页>What is BFC? What's the usage?

What is BFC? What's the usage?

2022-06-27 04:59:00 【mrcsunflower】

Catalog

One 、 What is? BFC？

1.BFC The definition of

2.BFC The rules of

Two 、 How to make an element become BFC Area （ How to trigger BFC）？

3、 ... and 、BFC What's the use （BFC What problems have been solved ）？

1. Solve the collapse of the outer margin （ Vertical collapse ）

2. utilize BFC Solution includes collapse

3.BFC You can prevent standard flow elements from being overwritten by floating elements

4. Remove the floating

One 、 What is? BFC？

1.BFC The definition of

BFC：Block Formatting Context, Block level formatting context .

This is described in the official documents to , One BFC The area contains all child elements that create the context element , But it doesn't include creating new BFC The inner element of the child element of ,BFC Is a block of independent rendering areas , Can be BFC As an attribute of an element , An element with this attribute will isolate its child elements from the world , It will not affect other external elements .

2.BFC The rules of

BFC Is a block level element , Block level elements are arranged vertically one by one
BFC It is an isolated independent container in the page , The label in the container will not affect the external label
The distance in the vertical direction is determined by margin decision , Belong to the same BFC The outer margins of two adjacent labels will overlap
Calculation BFC Altitude time , Floating elements are also involved in the calculation

Detailed explanation ：

<div class="box1" id="HM_bfc1">
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5" id="HM_bfc2">
            <div class="box6"></div>
            <div class="box7"></div>
            <div class="box8"></div>
        </div>
</div>

hypothesis box1 and box5 Are the two BFC Area , Then what can be understood according to the above principle is ,box1 This BFC The region contains child elements box2,box3,box4,box5, But does not include box6,box7,box8. and box5 This piece of BFC The area contains box6,box7,box8 These three sub elements .

summary ：

every last BFC A region contains only its child elements , Child elements that do not include their child elements .
every last BFC The areas are isolated , They don't influence each other .

Two 、 How to make an element become BFC Area （ How to trigger BFC）？

The following methods are commonly used ：

Set float , barring none
Set up overflow, namely hidden,auto,scroll
Inline block display mode display,inline-block
Set positioning position,absoulte perhaps fixed
Table cells display,table-cell
Elastic layout display,flex

3、 ... and 、BFC What's the use （BFC What problems have been solved ）？

1. Solve the collapse of the outer margin （ Vertical collapse ）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <style>
        .HM {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div class="HM"></div>
    <div class="HM"></div>
</body>
</html>

The effect is as follows ：

as a result of margin Vertical collapse . To solve this problem, just add a parent element to both boxes , And set the parent element to BFC Area , You can solve it margin The problem of collapse .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <style>
        .HM_bfc {
            overflow: hidden;
        }
        .HM {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div class="HM_bfc">
        <div class="HM"></div>
    </div>
    <div class="HM_bfc">
        <div class="HM"></div>
    </div> 
</body>
</html>

The effect is as follows ：

2. utilize BFC Solution includes collapse

Sometimes we add... To a child element margin May run with the parent element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    
    <div class="father">
        <div class="son"></div>
    </div>

</body>
</html>

The effect is as follows ：

This question uses padding Can solve the problem , But with BFC It can also solve , Just change the parent element to BFC Area .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: red;
            overflow: hidden;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 50px;
        }
    </style>
</head>
<body>

    <div class="father">
        <div class="son"></div>
    </div>

</body>
</html>

3.BFC You can prevent standard flow elements from being overwritten by floating elements

Floating elements are separated from the document stream , Go to the next level , That is, they are not at the same level as the original elements . So it may lead to the problem that floating elements cover basic elements .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <!-- <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/script.js"></script> -->
    <style>
        .red{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .blue{
            height: 300px;
            background-color: blue;
        }

    </style>
</head>
<body>
    
    <div class="red"></div>
    <div class="blue"></div>

</body>
</html>

The effect is as follows ：

Just let the blue area trigger BFC , You can do this without being affected by floating elements .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <!-- <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/script.js"></script> -->
    <style>
        .red{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .blue{
            height: 300px;
            background-color: blue;
            overflow: hidden;
        }

    </style>
</head>
<body>
    
    <div class="red"></div>
    <div class="blue"></div>

</body>
</html>

The effect is as follows ：

4. Remove the floating

Floating causes the height of the parent element to collapse , Do you remember how to clear the float ？ I think a lot of people know that ：overflow：hidden Well . Believe in knowing BFC Before that, we certainly didn't know why overflow：hidden Can clear the float . I know it now. ,BFC Any edge movement of the child elements in the region will not affect the external elements . therefore BFC Area can clear the effect of floating . There is no example to illustrate .

Reference resources ：https://www.jianshu.com/p/9211bdfe07d2

原网站

版权声明
本文为[mrcsunflower]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/178/202206270445352360.html