Summary of clear float methods using CSS

This article mainly introduces several methods for CSS to solve floating and clear floating: 1. Set the height of the parent element; 2. overflow; 3. Add Child element (block level), and set its clear attribute value to both to solve the problem (partition wall method, interior wall method); 4. Use after or beforepseudoObjectClear float. Let’s take a look with the editor below

1. Set the height of the parent element

If an element is to float, its ancestor element must have a height. Height Only in a box can the float be closed.

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

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

2. Overflow

Props up the height of the parent element

A father cannot be supported by his own floating son. . 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 take effect.

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: margin is invalid. 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 my 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

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