Summary of methods to clear css floats

This article mainly introduces a summary of three methods to clear CSS floating. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. Why do we float?

Why we float, why we need to clear floats, and how to clear floats. 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, with two p's side by side It is displayed as shown in Figure 1-3. Isn’t it amazing? Haha

But have you noticed that the background color of the outermost p layer is gone and the height has become 0 because the element is out of the document flow? , it does not occupy space in the outermost p. At this time, we need to clear the float and clear the collapse effect of the floating child element on the parent 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 one: 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; and One 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;
    }

Third method: clearfix;

If your page uses the bootstrap framework, introduce the css file and add it to the parent element clearfix can clear floats. This is also the most commonly used method in daily work and the most popular method among programmers. Just 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;
}

Have you all learned it? Friends in need, please collect it quickly.

Related recommendations:

About the centering of CSS floating elements

Introduction to the definition and usage of CSS floating and positioning

CSS Float and Float Clear (BFC) Simple Tutorial

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