Use of html css float left and float right

Comments:

In CSS, float is often used for layout, that is, float: Left or float: Right. In simple terms, the former is left floating (non-floating elements floating forward to the left side, if the elements are all float elements, they will float from left to right according to the stream type. If the elements do not fit, the line feed will be changed. The latter will float right (float to the right. But is that true? Detailed source reference: http://www.jb51.net/css/33740.html

No! Pay attention to the following points: 1. Floating elements are automatically set to block-level elements, which is equivalent to setting display: Block for elements (Block-level elements can be set to width and height, the element in the row is not allowed ). 2. Non-floating element display issues behind floating elements. 3. Multiple Elements with consistent floating direction are arranged in streaming mode. Pay attention to the height of the floating element. 4. The height of all child elements is adaptive to the floating element.
The following is a detailed analysis of four problems.
I. The floating element automatically changes block-level elements. First, let's talk about the differences between block-level elements and intra-row elements. Simply put, block-level elements occupy only one row and can set width and height and margins, the element in the row does not exclusive to a row, and setting the width and height of the line spacing does not take effect. Common block-level elements include: H1 ~ H6, P, Div, UL, and table. Common row elements include span, A, input, and select.
Sample Code:

<Div style = "height: 200px; width: 200px;">
<Span style = "float: Left; width: 150px; Height: 150px; margin: 5px; padding: 5px;
Border: solid 1px red; Background-color: olive; "> 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;
Background-color: olive; "> floating element span </span>
</Div>

Floating element span floating element Span

Ii. Non-floating elements after floating Elements

If the elements behind the floating element are non-floating row elements and overlap is generated due to positioning, the line element border, background, and content are displayed on the floating element, if a non-floating block-level element is behind the floating element and overlaps with the element after positioning, the border and background of the block-level element are displayed below the floating element, only when the content is not displayed under the floating element.

The sample code is as follows:

<Div style = "width: 600px; Height: 500px; Border: solid 1px blue; Background-color: yellow;">
<Div style = "float: Left; width: 250px; Height: 250px; Border: solid 1px aqua; Background-color: Gray;
Margin: 10px 0 0 10px; ">
Floating Div </div>
<Div style = "background-color: red; Border: solid 1px green; width: 300px; Height: 150px;">
Div following the floating element </div>
<Span style = "background-color: red; Border: solid 1px green; margin: 0 0 0-50px;">
SPAN following the floating element </span>
</Div>

Floating Div following the floating Element

SPAN following the floating Element

As you can see, the background and border of the DIV behind the floating Div are under the pressure, but the content is not. The span is displayed on the floating Div as a whole.
However, IE6 has a strange effect,

Instead of a non-floating Div, the floating element blocks the span.

Iii. Inconsistency of floating element height in the same direction in multiple parallel links

If the height of multiple floating elements in the same direction is different, they may have unexpected results, which is very different from the layout you want. Multiple floating elements in the Same Direction generally follow the stream layout. If a row is full, the line breaks automatically, which is similar to the following:

However, if the height of each floating element is inconsistent, the following situations may occur:

Unexpectedly, when elements 7 are arranged, a line is no longer displayed, so line breaks are required. However, the line breaks do not start from the line header, but from element 5, because element 5 is much higher than element 6.

4. Adaptive height of floating Elements

Because the elements float and are out of the Document Stream, the parent element cannot adapt to the elements. There are two most common methods to solve this problem. The first method is to add <Div style = "clear: Both; Height: 0px; after all floating elements; "> </div> Method 2: Use the omnipotent clear:

.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 adaptive element. For details, see:
Do you really understand clear: both?

During development, you can read the code such as "<Div style =" clear: Both; "> </div>" from the HTML code provided by the artist mm, but do you really understand what it is?

<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 code on an HTML page to see the effect, and then check the effect by removing "<Div style =" clear: Both; "> </div>, you will know the role of this sentence.

(1) clear: both:

(2) clear: Both

In this way, it should be clear: the clear: both behind the original; is actually to use the clear floating to open the outer Div, so sometimes, after we set the internal Div to floating, we will find that the background of the outer div is not displayed, because the outer div is not opened and is too small, therefore, the background is limited to one line.
But is this the best solution? In this case, the answer is no. You can use hack to implement:

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

After looking at the solution, let's take a look at the principle: (1) first, use the pseudo class after to be compatible with standard browsers such as ff and chrome. : After pseudo-class IE is not supported. It is used with the content attribute to use the content after the object, for example, A: After {content: "(Link )";} this CSS will add link text behind the text in tag.
(2) set the zoom attribute "ZOOM: 1;" using the "* html", which is only recognized by IE6, to ensure compatibility with ie6. (3) Use the "*: First-Child + html" selector only recognized by IE7 to set the zoom attribute "ZOOM: 1;" to ensure compatibility with ie7. Detailed source reference: http://www.jb51.net/css/33740.html