HTML CSS float left with float right's instructions (GO)

Reviews :

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? For more information, refer to: http://www.jb51.net/css/33740.html

No! Note the following: 1, floating elements will be automatically set to block-level elements, equivalent to the element set Display:block (block-level elements can be set width and height, 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.
First, floating elements of the automatic block-level element to say that the block-level elements and elements of the difference, in a nutshell, the block-level elements of the exclusive line, you can set the width and height and margins, the row elements 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:

<div style= "height:200px; width:200px; " >
<span style= "Float:left; width:150px; height:150px; margin:5px; padding:5px;
Border:solid 1px red; "> Floating element span</span>
</div>
<div style= "height:200px; width:200px; " >
<span style= "width:150px; height:150px; margin:5px; padding:5px; Border:solid 1px red;
"> Floating element span</span>
</div>Floating element span floating element span

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:

<div style= "width:600px; height:500px; Border:solid 1px Blue; ">
<div style= "Float:left; width:250px; height:250px; Border:solid 1px Aqua;
margin:10px 0 0 10px; " >
Floating div</div>
<div style= "Border:solid 1px green; width:300px; height:150px; " >
With the div</div> behind the floating element.
<span style= "Border:solid 1px green; margin:0 0 0-50px; " >
With the span</span> behind the floating element.
</div>Floating div with the div behind the floating element followed by the span behind the floating element

As you can see, the div background and the frame behind the floating div are pressed underneath, but the content is not, and the 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 floating elements: <div style= "clear:both;height:0px;" ></div> second approach, use universal clear:

1234567891011121314151617

.clearfix:after { visibility:hidden; display:block; font-size:0; content: "."; clear:both; height:0; } * HTML. Clearfix { zoom:1; *:first-child + HTML. Clearfix { zoom:1;

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?"

1234	< div   style= " border:2px solid red; " > < div   style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</ div > < div   style=" 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:

12345678910111213141516

<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 the pseudo-class to be compatible with FF, Chrome and other support standards of the browser. : After pseudo-class IE is not supported, it is used in conjunction with the content property to set the contents of the object, for example: a:after{content: "(link)";} This CSS will add the text of the link text to the inside of 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. For more information, refer to: http://www.jb51.net/css/33740.html

HTML CSS float left with float right's instructions (GO)