About block-level formatting in CSS

1.BFC definition

BFC (Block formatting context) is literally translated as "block-level formatting context". It is an independent rendering area, with only Block-level boxes (block-level elements) participating. It stipulates how the internal Block-level Box is laid out and has nothing to do with the outside of this area.

In layman’s terms Said: The element that created the BFC is an independent box. The sub-elements inside will not affect the layout of the outside elements (no matter how the inside is laid out, it will not affect the outside). The BFC still belongs to the ordinary flow in the document.
##2. Generation of BFC:

Understand how BFC triggers BFC

If one of the following conditions is met, BFC can be triggered and transformed into BFC

Root element

The float attribute is not none

position

It is not static and relative

overflow

It is not visibledisplay For inline-block, table-cell, table-caption, flex, inline-flex

You will find that BFC is everywhere, you just don’t know it when you use it

3.BFC layout Rules:

What are the characteristics after transforming into BFC, as follows:

The boxes inside will be placed one after another in the vertical direction.

The vertical distance of the Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap

The left side of the margin box of each element is in contact with the left side of the containing block border box (for left-to-right formatting, otherwise on the contrary). This is true even if there is float.

The BFC area will not overlap with the float box.

BFC is an isolated independent container on the page. The sub-elements inside the container will not affect the elements outside. And vice versa.

When calculating the height of BFC, floating elements also participate in the calculation

4.BFC function:

Use it to come boby

1.Prevent

Margin

Overlapbfc causes the margins of child elements in the same bfc to overlap (the vertical distance of the Box is determined by the margin. The margins of two adjacent Boxes belonging to the same BFC will occur Overlap)

Problem: As you can see from the picture, there is only a 20px margin between String1 and String2. Logically speaking, it should be 40px, but this causes their margins to overlap in bfc

Code:

<style>.container1{
        /* 通过overflow：hidden可以创建bfc */
        overflow: hidden;
        background-color: red;
        width: 300px;
    }
    .sub1{
        margin: 20px 0px;
        background-color: #dea;
    }</style><div class="container1">
        <div class="sub1">String1</div>
        <div class="sub1">String2</div></div>

Solution: We can wrap a container outside the div and trigger the container to generate a BFC. Then the two divs do not belong to the same BFC, and margin overlap will not occur.

Code:

<style>
    .newbfc{
            overflow: hidden;
    }</style><div class="container1">
        <div class="sub1">String1</div>
        <div class="newbfc"><div class="sub1">String2</div></div></div>

2.

Clear float

:Problem: When the child elements of an element are all floated Afterwards, there will be a height collapse phenomenon, that is, the height of the parent container will not be stretched

Code:

<style>
    .pre2{
        width: 200px;
        border: 2px solid red;
    }
    .float1,.float2{
        width: 100px;
        height: 100px;
        float: left;
    }
    .float1{
        background-color: #dee;
    }
    .float2{
        background-color: #dcc;
    }</style><div class="pre2">
        <div class="float1"></div>
        <div class="float2"></div></div>

Solution:

bfc rules: When calculating the height of BFC, floating elements also participate in the calculation, so as long as the parent container is set to bfc, the child elements can be included:

This container will contain floating child elements, and its height will expand can contain its child elements, which, in this BFC, will flow back into the page's regular document flow.

.pre2{
        width: 200px;
        border: 2px solid red;
        /* 设置overflow*/
        overflow:hidden;
    }

3. Solve the layout: prevent text wrapping

Code:

<style>.container2{
        overflow: hidden;
        width: 200px;
    }
    .box{
        float: left;
        width: 100px;
        height: 30px;
        background-color: #daa;
    }</style><div class="container2">
        <div class="box"></div>
        <p style="background-color: #eea">sdfadsfdff fffffffds fsfffff sfd  fsdsdfsdf fffffff</p></div>

This p element does not move, but it appears below the floated element. The line boxes (referring to text lines) of the p element are shifted. Here the horizontal shrinkage of line boxes provides space for floating elements.

BFC rules: The left side of the margin box of each element touches the left side of the containing block border box (for left-to-right formatting, otherwise the opposite). This is true even if there is float.

To solve this problem, just add overflow: hidden to the p element to make it a new bfc.

I believe you have mastered the method after reading these cases. Please pay attention to php for more exciting things. Other related articles on the Chinese website!

Related reading:

What are the commonly used attributes for dividing frames and windows in HTML?

What are the references to CSS in HTML? Method

What are the methods of removing borders and borderless iframes

The above is the detailed content of About block-level formatting in CSS. For more information, please follow other related articles on the PHP Chinese website!