How to clear floats in CSS? 3 methods introduced

How to clear floats in CSS? This article will introduce you to 3 ways to use CSS to clear floats. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

First of all, I won’t talk about why we need to clear floats here. Anyway, there are many things to do if we don’t clear floats.

Below I will talk about three commonly used methods to clear floats, which are enough.

1. Add an empty div after the floating element and clear the floating element

html code:

<div class="wrap">
   <div class="float">浮动</div>
   <div class="clear"></div>
   <div class="nofloat">不想被浮动影响</div>
</div>

css code:

.wrap{
  width:500px;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    background:red;
}

Although an empty div is added now, the float is not cleared, so the current effect is that the third child element. nofloat is still affected by the float.

OK, now add clear float to .clear:

.clear{
    clear:both;
}

Refresh the effect and the effect will come out:

PS: This situation is more suitable for the elements to be arranged vertically, in order not to be affected by each other's floating.

2. Use the BFC feature to clear floating

html code:

<div class="wrap">
   <div class="float">浮动</div>
   <div class="nofloat">不想被浮动影响</div>
</div>

css code:

.wrap{
  width:500px;
  border:1px solid red;
  margin:0 auto;
  overflow:hidden;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    background:red;
    overflow:hidden;
}

The effect is like this:

The parent container here does not have a fixed height. Originally, after the first child element floats, the height of the parent element will collapse to the height of the second child element. The child elements are the same height, but since overflow:hidden is set for both the second child element and the parent element, they both generate a new BFC area. According to the BFC layout rules provided above, we can know that the BFC area does not It will overlap with the float box; when calculating the BFC height, the height of the floating element is also involved in the calculation. So you get the effect of clearing floats. It’s a bit confusing to say, but in fact, clearing floats should be used reasonably according to the actual situation in your development.

3. Use: after pseudo-element to clear the float of the parent element of the floating element

html code:

<div class="wrap">
   <div class="float">浮动</div>
</div>

css code:

.wrap{
  width:500px;
  border:1px solid red;
  margin:0 auto;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}

At this time, the child element is floating and separated from the document flow, so the parent element is highly collapsed:

You can see the parent element The borders are squeezed together.

OK, now add a clearfix class to the parent element:

<div class="wrap clearfix">
   <div class="float">浮动</div>
</div>

.clearfix{
    *zoom:1;
}
.clearfix:after{
    content:'clear';
    display:block;
    height:0;
    clear:both;
    overflow:hidden;
    visibility:hidden;
}

Now the effect after refreshing is:

This method is the same as BFC is more commonly used by individuals to clear floats. In actual development, these two are actually enough.

Okay, I will briefly mention clearing floats here!

If there are any errors, please leave a message to correct them.

Recommended related tutorials: CSS video tutorial, CSS3 video tutorial

The above is the detailed content of How to clear floats in CSS? 3 methods introduced. For more information, please follow other related articles on the PHP Chinese website!