How much CSS has cleared the floating way

This time to everyone to bring CSS how many clear floating way, clear floating note what, the following is the actual case, together to see.

1. Set the parent element height

If an element is to float, its ancestor elements must have a height. The height of the box to hold the float

As long as it floats in a box with a height, the float will not affect the trailing elements. So it is to clear the impact of floating.

Cons: At work, we never add height to all the boxes, because of the hassle and the inability to adapt to the rapid changes in the page.

2, overflow

Prop up the height of the parent element

A father cannot be stretched out of height by his own floating son. But just add overflow:hidden to the father; Then the father would be able to get high by his son.

Overflow:hidden; be able to let the margin take effect.

Overflow:hidden;overflow:auto;

Cons: If there is overflow to display the content, also to be hidden at the same time.

3, add child element (block level), and set its clear property value to both to resolve

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

The simplest way to clear the float is to add clear:both to the box, and to express its own inner elements, not affected by the other boxes.

Disadvantage: is margin failure. There is no gap between the two P.

3.1. Partition method:

Create a wall in the middle of a two-part floating element. Separate the floating elements of the two parts, so that the trailing elements do not go after the preceding floats.

The wall uses its own 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 useful, but the first p, or no height. If we want to let the first P now, automatically according to their son, to support the height.

3.2. Inner 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 the latter part of P not chase the former part of P, and can put the first p out of height.

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

4. Use after or before pseudo-objects to clear floating

P:after{content: "";d Isplay:block;clear:both;} P:before{content: "";d Isplay:block;clear:both;}

This method is used more and is recommended in the project

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

React and CSS3 to realize the animation of removing red envelopes
CSS background-attachment use of the detailed

CSS3 Realization Click to enlarge the animated instance