How many ways does CSS have to clear floats?-CSS Tutorial-php.cn

How many ways does CSS have to clear floats?

php中世界最好的语言

Release： 2018-03-22 10:40:42

Original

1056 people have browsed it

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;

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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;}

Copy after login

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!