What is BFC? What is the use?

BFC

(Recommended tutorial: css quick start)

That is, block formatting context (block formatting context) Yes Part of the visual rendering of the page's CSS. It is an area used to determine the layout of block boxes and the interaction of floats.

My understanding:

BFC is an environment. Elements in this environment will not affect the layout of other environments. In other words, elements in different BFCs will not affect the layout of other environments. interfere with each other.

Function:

1. Prevent margins from collapsing

The vertical margins of two connected block-level elements will overlap, and some I regard this situation as a bug, but I think it may be due to paragraph layout considerations and this feature to ensure consistent line spacing. Let’s take a look at an example first:

*{margin: 0px;padding: 0px}
p {
    color: red;
    background: #eee;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px;
    border: solid 1px red;
}

As can be seen from the above, we set margin for both p elements, but the middle space is collapsed. Then give an example of BFC:

.ele{
    overflow: hidden;
    border: solid 1px red;
}

As can be seen from the above, we set the overflow value to hidden for each div element, generating a block-level format context, because Margins will not overlap each other.

2. BFC can contain floating elements

*{margin: 0px;padding: 0px}
.floatL{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
    text-align: center;
    line-height: 100px;
}
.box{
    border: 1px solid red;
    width: 300px;
    margin: 100px;
    padding: 20px;
}
.BFC{
    overflow: hidden;
    *zoom: 1;
}

It can be seen from the running results that if the block-level element contains The height of the floating element will collapse, but after turning it into a BFC, the BFC will automatically take the floating element into account when calculating the height.

3. BFC can prevent elements from being overwritten by floating elements

*{margin: 0px; padding: 0px}

.box1{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(0, 0, 255, 0.5);
    border: 1px solid #000;
    float: left;
}
.box2{
    width: 200px;
    height: 200px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.5);
    border: 1px solid #000;
    /* overflow: hidden; */
    /* *zoom: 1; */
}

As can be seen from the above, when the element is floated, it will be Subsequent block-level elements overlap each other. So how to solve this problem, just create a BFC for the following elements. Add the overflow attribute to box2.

overflow: hidden;
*zoom: 1;

This prevents the problem of overlapping floating elements.

The above is the detailed content of What is BFC? What is the use?. For more information, please follow other related articles on the PHP Chinese website!