How to clear css float

This time I will bring you the method of clearing css floating, and what are the precautions for clearing css floating. The following is a practical case, let’s take a look.

First, why do we float

Why float, why do we need toclear float, and how to clear float. When laying out a web page, elements sometimes need to be displayed side by side. If floating is not selected, those block elements will be displayed line by line, taking up space and causing a very bad user experience.

The following is the code of elements without floating

<p class=“box”>
        <p class=“box01”></p>
        <p class=“box02”></p>
    </p>
 .box{
    background: #000;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
}

Picture 1-1 is the element without floating, Picture 1-2 is the width and height of the outer container, the purpose of this will be discussed below

After we add float to the element, the layout changes and the two p's are displayed side by side, as shown in Figure 1-3. Isn’t it amazing, haha

But have you noticed that the background color of the outermost layer of p is gone, and the height has also become 0, because the document flow from which the element is separated is not in the outermost layer of p. Taking up space, then we need to clear the float and clear the impact of the collapse of the parent element caused by the floating of the child element. (Note that clearing floats here does not refer to the floats previously set for child elements. Second, it refers to the impact of clearing floats on parent elements. I hope everyone can understand).

There are three ways to clear floats:

The first: clear:both;

In the parent Add a p of class clear inside the element (same level as box01 and box02), and then add the attribute value clear:both; to this class to clear the float. The following is the code and the effect after clearing the float, as shown in Figure 1-3

<p class=“box”>
        <p class=“box01”></p>
        <p class=“box02”></p>
        <p class=“clear”></p>
    </p>
   .box{
    background: #000;
}
.clear{
    clear: both;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
}

You can see that the background color comes out, and the height of the parent element is exactly 100px, which is the expansion of the child element.

Second type: overflow: hidden;

Add overflow: hidden; in the parent element, you can also clear the float, as shown in the following css code, but this method is not recommended. overflow: hidden; Another meaning is to hide the excess part. If it is not handled well, it will still cause trouble to the page.

.box{
        background: #000;
        overflow: hidden;
    }

The third type: clearfix;

If your page uses the bootstrap framework, introduce the css file and add clearfix to the parent element. Clearing floats is also the most commonly used and favorite method among programmers in daily work. You only need to add a class, and clear:both adds an extra p to the page. Therefore, the editor recommends the third method to everyone.

If your page does not use the bootstrap framework, there is also source code for beginners to refer to. Add pseudo-classes to clearfix to clear floats.

<p class=“box clearfix”>
        <p class=“box01”></p>
        <p class=“box02”></p>
        <p class=“clear”></p>
    </p>
 .box{
    background: #000;
}
.clearfix:before,.clearfix:after{
    content: ”;
    display: table;//可以很好的解决浏览器兼容问题
}
.clearfix:after{
    clear: both;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

h5 implements multi-image preview upload and click-to-drag controls

S5 allows layered screens adaptation

The above is the detailed content of How to clear css float. For more information, please follow other related articles on the PHP Chinese website!