Instructions for using float left and float right in CSS

CSS in a lot of time will be used to layout, that is often seen float:left or float:right, simple point, the former is left floating (to the left to the front of the non-floating elements floating, all floating elements, according to the flow of floating from left to right, not put the line), The latter is the right float (floating to the right) movement. But is it just so?

No!
Be aware of the following points:
1, floating elements will be automatically set to block-level elements, equivalent to the element set Display:block (block-level elements can be set and high, and the elements in the row can not).
2, floating element behind the non-floating element display problem.
3. Multiple floating-oriented elements use flow arrangement, at which point you should pay attention to the height of the floating element.
4, the child elements are all floating elements of the element height adaptive problem.

The following is a detailed analysis of four questions.

One, floating element automatic block level element
First of all, the block-level elements and the elements in the row, in a nutshell, the block-level elements of a single row, you can set the width of the height and the margin, the row element will not be exclusive row, set wide and High Line spacing will not be effective. Common block-level elements are: H1~h6, P, DIV, UL, table, common inline elements are: span, a, input, select, and so on.

Example code:

<Divstyle= "height:200px; width:200px;"> <spanstyle= "float:left; width:150px; height:150px; margin:5px; padding:5px; border:solid 1px red; background-color:olive; ">Floating element span</span> </Div> <Divstyle= "height:200px; width:200px;"> <spanstyle= "width:150px; height:150px; margin:5px; padding:5px; border:solid 1px red; background-color:olive;">Floating element span</span> </Div>

The effect is as follows:

The problem of non-floating element after floating element
If the element behind the floating element is a non-floating inline element and because the positioning produces overlap, the inline element border, background, and content are displayed on top of the floating element, and if non-floating block-level elements follow the floating element and overlap after positioning, the block-level element border and background are displayed under the floating element "below". Only the content is displayed in floating elements that are not "below" the floating element.
The sample code is as follows:

<Divstyle= "width:600px; height:500px; border:solid 1px blue; background-color:yellow;"> <Divstyle= "float:left; width:250px; height:250px; border:solid 1px Aqua; background-color:gray; margin:10px 0 0 10px;" >Floating Div</Div> <Divstyle= "background-color:red; border:solid 1px Green; width:300px; height:150px;">the div behind the floating element</Div> <spanstyle= "background-color:red; border:solid 1px Green; margin:0 0 0-50px;">span behind floating elements</span> </Div> 

As follows:

As you can see, the div background and the frame behind the floating div are pressed underneath, but the content is not, andthe whole span is displayed above the floating div.  

But in ie6 this effect is very strange,

The floating element is not pressed on top of the non-floating div, but spans the span.
Three, multiple parallel in the same direction floating element height inconsistency problem
Multiple floating elements in the same direction, if highly inconsistent, are likely to have unintended effects, which can vary greatly from the layout you want. More than one floating element in the same direction is usually a flow-like layout, and a line is full and wraps, which is similar to the following effect:

But the height of each floating element is inconsistent, the effect is likely to appear below:

It's a surprise, the main arrangement to element 7, the line has not been shown, so to wrap, but here is not starting from the wardrobe, but starting from element 5, because element 5 is much higher than the element 6 caused.
Four, the child elements are all floating element height adaptive problem
Because the element floats and is detached from the document flow, the parent element cannot be adapted from the element. The most common way to solve this problem is two, the first is to add after all the floating elements:
<div style= "clear:both;height:0px;" ></div>
The second approach, using universal clear:

Then add class= "Clearfix" to the element you need to adapt. For details, please refer to:

Do you really understand clear:both?
In the development, from the artist mm to your HTML code, you can certainly see "<div style=" Clear:both; ></div> "Such code, but do you really understand what it is for?"
Such as:

<Divstyle= "border:2px solid red;"> <Divstyle= "float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</Div> <Divstyle= "Clear:both;"></Div> </Div>

You can put this part of the code on an HTML page to see the effect, and then remove the "<div style=" Clear:both; ></div> "Look at the effect, you will know the effect of this sentence."

(1) Clear:both:

(2) Non -Clear:both

In this way, should be at a glance: The original behind the Clear:both, in fact, the use of clear floating to the outer div open, so sometimes, we will set the internal div to float, we will find that the outer div background is not shown, the reason is that the outer div is not open, too small, So the background you can see is limited to one line.

But is this the best way to do it?
I say so, of course the answer is not. can be implemented via hack:

<style>. Clearfix:after{Visibility:Hidden;Display:Block;font-size:0;content: ".";Clear:both;Height:0; }* HTML. Clearfix{Zoom:1;}*:first-child + HTML. Clearfix{Zoom:1;} </style> <Divclass= "Clearfix"style= "border:2px solid red;"> <Divstyle= "float:left; width:80px; height:80px; border:1px solid blue;">TEST DIV</Div> </Div> 

After reading the solution, let's look inside the principle:
(1), the first is to use: After this pseudo-class to be compatible with FF, Chrome and other support standards browser.
: After pseudo-class IE is not supported, it is used in conjunction with the content property to set the contents after the object, for example:
A:after{content: "(link)";}
This CSS will add the link text text behind the text in the a tag.

(2), using "* html" This only IE6-aware selector, set the Zoom property "ZOOM:1;" Implement compatible IE6.
(3), using "*:first-child + HTML" This only IE7-aware selector, set the Zoom property "ZOOM:1;" Implement compatible IE7.

This article transferred from: http://www.jb51.net/css/33740.html

Instructions for using float left and float right in CSS