CSS Clear Float

Float is an interesting (you can also say it is very troublesome) CSS properties, any element is set to float, the level is increased, it will affect the elements behind it is not set floating, these unfortunate affected people will run to the bottom of the floating layer (of course, except IE6, IE7), the code looks like this:

<div style= "width:100px; height:100px; border:1px solid #333; Float:left; " ></div>

<div style= "width:120px; height:140px; Background: #eee; " ></div>

Because a floating element is set to raise the level, if a bland parent element (without setting a float or other level-raising attribute) actually packs a floating guy, and the parent is not set high, then it's sad because the parent can't wrap its children floating elements (of course IE6, IE7 and other exceptions):

<div style= "width:160px; border:1px solid #333; padding:10px; " >

<div style= "width:120px; height:140px; Background: #eee; Float:left; " ></div>

</div>

How do you get the parent to wrap the floating layer?

Here are some of the methods I have listed, if there is any other way, welcome to add

1. Under the floating layer, set the empty div with the following code:

<div style= "width:160px; border:1px solid #333; padding:10px; " >

<div style= "width:120px; height:140px; Background: #eee; Float:left; " ></div>

<div style= "Clear:both; height:0; font-size:1px; " ></div>

</div>

Description
Clear:both, which allows elements to be unaffected by floating layers, to the bottom of a floating layer,
The parent can wrap the bottom empty div so that it seems to wrap up the floating layer,
In fact, is a fake AH ~
Disadvantages: IE6 will be more than 1 pixels, and set a non-semantic empty div;

------------------------------------------------------------------------------------------------

2. In the parent setting: Overflow:hidden;

<div style= "width:160px; border:1px solid #333; padding:10px; Overflow:hidden; " >

<div style= "width:120px; height:140px; Background: #eee; Float:left; " ></div>

</div>

Description:overflow:hidden; It is used to raise the level of the parent, the level is improved, and the child floating element can be wrapped naturally.

Disadvantage: If there are any elements in the parent to float outside the parent, it is tragic, such as many JS cue layer effect,

can not use Overflow:hidden;

---------------------------------------------------------------------------------------------------

3. In the parent setting: float

<div style= "width:160px; border:1px solid #333; padding:10px; Float:left; " >

<div style= "width:120px; height:140px; Background: #eee; Float:left; " ></div>

</div>

Description: The parent package is not floating layer, because the hierarchy is not enough, the parent also set float OK

Disadvantage: parent If also have parent, also want to set float, that method, all the way to float to body there is the finished son ~ ~ er. This method itself is very funny

--------------------------------------------------------------------------------------------------------------- ----------------

4. In the parent setting: Display:inline-block;

<div style= "width:160px; border:1px solid #333; padding:10px; Display:inline-block; " >

<div style= "width:120px; height:140px; Background: #eee; Float:left; " ></div>

</div>

Description:inline-block; is an incompatible property, but is used here just to raise the parent level,
In this way, you can completely ignore its incompatibility ha ~

disadvantage: Cannot set element center: Margin-left:auto; Margin-right:auto;
You can use this method on elements that do not need to be centered, ha ~

--------------------------------------------------------------------------------------------------------------- -------------------

5. Parent if absolute positioning: position:absolute;

<div style= "width:160px; border:1px solid #333; padding:10px; Position:absolute; " >

<div style= "width:120px; height:140px; Background: #eee; Float:left; " ></div>

</div>

Description: to say the level, that absolute positioning must be the eldest, in the absolute positioning of the eye, a small floating also incredibly dare to call the hierarchy??

Cons:position:absolute; affects the layout, which is relative to the parent block element to locate the reference,
Go completely out of the way of the document flow, hehe, so if you set the float in an absolutely positioned element, then set it up,

Regardless of any floating god horse, because in the absolute positioning, floating what, really is a cloud ~

--------------------------------------------------------------------------------------------------------------- -------------------

6. Set under the floating layer: <br clear= "All"/>

<div style= "width:160px; border:1px solid #333; padding:10px; " >

<div style= "width:120px; height:140px; Background: #eee; Float:left; " ></div>

<BR clear= "All"/>

</div>

--------------------------------------------------------------------------------------------------------------- ---------------------

7. Add this line to the parent level:

. clear:after {content: ' \20 '; clear:both; display:block;}

<style>

. clear:after {content: ' \20 '; clear:both; display:block;}

</style>

<div style= "width:160px; border:1px solid #333; padding:10px; "class=" clear ">

<div style= "width:120px; height:140px; Background: #eee; Float:left; " ></div>

</div>

Description:: After is a very useful property, with it, can be inserted in any previous element string, space, '. ' Sort of,
But unfortunately, ie6,ie7 do not know: After, but what is the relationship?
Anyway, Ie6\ie7 's parents can wrap the floating layer, so don't worry about them.
forget to explain, first to the floating layer to insert a space below (content: ' \20 ';), and then turn this space into a block element, and clear the influence of the floating layer, let the parent pack this space, is also a cover-up ha ~

CSS Clear Float