How the page layout clears the float in CSS

When we are in the page layout, basically can not avoid using float, but it will also cause some problems, especially when the container height is not fixed, at this time its height is completely by the internal elements of the open. If the internal element is still floating, the parent container cannot be stretched because the inner element is detached from the document stream. If the parent container has a background or border, it will not display correctly, and other containers or content below the parent container will float up and occupy the position where the above child container should occupy. Then you need to clear the float.

Some of the methods summarized here are mainly aimed at problems similar to the above, but they are not limited to the above problems. There are several main ways to do this:

1. Set the Blank label

2, the parent container set Display:inline-block

3, the parent container set overflow value auto or hidden

4, Clearfix method

Let's take a look at the following example.

Example:

The HTML structure is like this:

The code is as follows	Copy Code
<div class= "Cont1" > <div class= "cols1" >cols1</div> <div class= "COLS2" >cols2</div> Cont1 </div> <div class= "Cont2" >cont2</div>

Cont1 height is not fixed, cols1 and cols2 float, cont2 height is fixed under cont1.

Ideal effect:

The following are implemented in several ways:

Method One: Set the empty label

We add an empty label clear to the last side of the container cont1:

The code is as follows	Copy Code
<div class= "Cont1" > <div class= "cols1" >cols1</div> <div class= "COLS2" >cols2</div> Cont1 <div class= "clear" ></div> </div> <div class= "Cont2" >cont2</div>

Then add CSS to clear:

The code is as follows	Copy Code
. clear {Clear:both;}

OK, that'll do it.

Method Two: Parent container set Display:inline-block

Simply add CSS properties to the parent container display:inline-block; It's okay.

The code is as follows	Copy Code
. cont1 {... display:inline-block; ... }

Method Three: Parent container set overflow value auto or hidden

Simply add attribute Overflow:auto to the parent container; or Overflow:hidden;

The code is as follows	Copy Code
. cont1 {... overflow:auto;/*hidden can also be * * ...}

Method Four: Clearfix method

You need to write a Clearfix class at this point:

The code is as follows	Copy Code
. Clearfix:before,. clearfix:after {display:table; Content: ""; Clearfix:after {Clear:both;}

Then you can mount the Clearfix class on the cont1.

The above is a summary of several clear floating method, welcome to come up with a better solution.