Those things that are clearly floating

One of the layout problems that we often encounter is that two containers are distributed side by side.

At this time we are thinking about how to achieve, if it is a small container we may be thinking of display:inblock to achieve

But if it is two large containers, more of the time I think about is floating to complete the layout.

But a lot of the time we're going to clear the float is a indefinitely method, there are a few common ways to clear the float:

One, the parent container to the dead height

This will be a good solution to the floating problem, but there are certain limitations. Many times the height of our parent container is automatic and cannot be killed at all.

So this is the time to use other methods.

Second, add an empty div tag behind the floating container Clear:both

This method should now also have a lot of people in use, is to add an empty div tag behind the floating element. Then add a style style to the Div clear:both

can also be very effective to solve the floating problem but if a page has a lot to use to float, then you have to add a lot of empty div so it will be very troublesome,

And it's hard to understand. So it's still pretty small.

Third, parent div definition Pseudo-class: After and zoom

This method is a method that I like to use at present.

By defining a class

/* Clear Floating style */
. clear:after{
Content: "\0020";d Isplay:block;height:0;clear:both;
}
. clear{
Zoom:1;
}

Adding this class to the parent container of a floating container is a good way to solve the floating problem when it is needed, and it is very convenient for the individual to recommend this method.

Iv. parent div definition Overflow:hidden or Overflow:auto

This method has some limitations, you must define width or zoom:1, and you cannot define height, because when you use hidden or auto, the browser automatically checks the height of the floating area.

In addition, when using hidden, you cannot use it with position so that the excess will be hidden and the scrollbar will appear if the child element exceeds the width of the parent element when using auto.

Some of the other methods are not introduced, are only a few to understand. There is not much use of value. If really interested can go online to check, there is a lot of information on the Internet.

Reprinted from: http://www.cnblogs.com/hx1992/p/3791587.html

Those things that are clearly floating