How many ways does CSS have to clear floats?

This time I will bring you how many ways to clear floats in CSS, and what are the precautions for clearing floats. The following is a practical case, let's take a look.

1. Set the height of the parent element

If an element wants to float, its ancestor element must have a height. A height box can close the floating

As long as it floats in a box with a height, then this float will not affect the subsequent floating elements. So the impact of floating is cleared.

Disadvantages: At work, we will never increase the height of all boxes because it is troublesome and cannot adapt to rapid page changes.

2, overflow

support the height of the parent element

A father cannot be himself The floating son stretched out the height. However, as long as overflow:hidden; is added to the father, the father can be pushed out by his son.

overflow:hidden; can make margin effective.

overflow:hidden;
overflow:auto;

Disadvantage: If there is overflow content to be displayed, it will also be hidden at the same time.

3. Add child elements (block level) and set their clear attribute value to both to solve the simplest problem of

<p>
      <p></p>
      <p></p>
     <p></p>
  </p>
   <p>   → clear:both;
       <p></p>
       <p></p>
     <p></p>
  </p>

The method is to add clear: both to the box; to represent its own internal elements, which are not affected by other boxes.

Disadvantage: The margin fails. There is no gap between the two p's.

3.1. Partition wall method:

Build a wall between the two floating elements. Separate the two parts of float so that the floating element behind does not chase the floating element in front.

The wall uses your body as a gap.

<p>
       <p></p>
       <p></p>
       <p></p>
  </p>
   <p class="clear"></p>
   <p>
      <p></p>
      <p></p>
      <p></p>
  </p>

We found that the partition method is easy to use, but the first p still has no height. If we now want the first p to automatically reach its height based on its own son.

3.2. Interior wall method:

<p>
       <p></p>
       <p></p>
       <p></p>
       <p class="clear"></p>
   </p>
  <p>
       <p></p>
      <p></p>
      <p></p>
  </p>

The advantage of the interior wall method is that, Not only can it prevent the p in the back part from chasing the p in the front part, but it can also push the first p to its height.

In this way, the background and border of this p can be stretched according to the height of p

4. Use the after or before pseudo-object to clear the float

p:after{content:"";display:block;clear:both;}
p:before{content:"";display:block;clear:both;}

This method is used more often and it is recommended to use this method in the project

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:

React and CSS3 implement WeChat red envelope opening animation
##CSS background -Detailed explanation on the use of attachment

CSS3 animation example of clicking to enlarge

The above is the detailed content of How many ways does CSS have to clear floats?. For more information, please follow other related articles on the PHP Chinese website!