BFC application

Concept: BFC triggered box, the box is completely isolated from the inside and the outside, the sub-element within the container to the outside does not affect the layout element

A generates BFC way:

1.overflow as long as the value of the case is not visible

2.float the value is not none of the time

3.display value is inline-block or table

4.position values are fixed or absolute

II. Several common role of BFC

1. When two boxes, a margin-bottom property, there is a margin-top attribute, two boxes fusion margin value

<style>
    .box1{
    width: 200px;
    height: 200px;
    background-color: red;
    margin-bottom: 50px;    
    }
    .box2{
    width: 200px;
    height: 200px;
    background-color: lime;
    margin-top: 50px;    
    }
</style>

One box can give a parent the box to add BFC, BFC added value to solve two boxes margin of mutual integration issues

<style>
    .box1{
    width: 200px;
    height: 200px;
    background-color: red;
    margin-bottom: 50px;    
    }
    .box2{
    width: 200px;
    height: 200px;
    background-color: lime;
    margin-top: 50px;    
    }
    .bfc{
        overflow: hidden;
    }
    </style>
    

<div class="box1"></div>

<div class="bfc">
<div class="box2"></div>
</div>

2. There are two boxes, a parent box, a cassette box, the value is set to the sub-margin-top box, the box will collapse the parent

Parent box to add BFC, can solve the problem collapse of the parent box

<style>
.father{
    width: 200px;
    height: 200px;
    background-color: red;
    overflow: hidden;
}
.son{
    width: 100px;
    height: 100px;
    margin-top: 30px;
    background-color: lime;
}
</style>
    

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

It can be used to remove floating 3.BFC

When the sub floating box, drag the standard elements, the parent can not be softened box

BFC added to the parent box

    <style>
.father{
    width: 300px;
    border: 1px solid #000;
    overflow: hidden;
}
.son{
    width: 200px;
    height: 200px;
    background-color: lime;
    float: left;
}
</style>
    

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

4. Trigger the BFC box, does not overlap with the floating element, used in fixing the left and right adaptive layout

<style>
.left{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right{
height: 300px;
background-color: lime;
overflow: hidden;
}
</style>
    

<div class="left"></div>
<div class="right"></div>

Guess you like