CSS float with clear float

CSS Floating Rules:

The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.

The float box is not in the normal flow of the document, so the Block box in the normal flow of the document behaves as if the floating box does not exist.

Floating 1:

setting float:right, the element moves out of the document stream and up to the right until its right edge touches the left edge of the containing block.  

Floating 2:

When box 1 floats to the left, it moves out of the document stream and shifts to the left until its left edge touches the left edge of the containing box.

because it is no longer in the document flow, it does not occupy space and actually covers the box 2 , make the box 2 disappears from the view.

Floating 3:

If all three boxes are floating to the left, then box 1 floats to the left until it touches the containing box, and the other two boxes float to the left until they touch the previous float box.

Floating 4:

If the inclusion box is too narrow to accommodate three floating elements arranged horizontally, the other floating blocks move down until there is enough space.

If the height of the floating elements is different, then they may be "stuck" by other floating elements when they move down:

floating Wrapping: A floating element generates a block-level box, regardless of its own element.

Note: If floating non-replacement elements, specify a definite width; otherwise, they will be as narrow as possible.

CSS Float The initial role of :

apply to the image so that the text surrounds the image.

the principle of text around an image :

The line box surrounds the floating element. Text is a line box.

(Here the Line box, where it can be positioned in another non-line box, as long as it is close to the floating element, and the non-row box containing it does not have a clear float set, it will surround the floating element.) ）

The effect of floating: the position of the sibling element that affects it and the parent element creates a height collapse

1. Influencing sibling elements

The sibling element is a block-level element : Then the sibling element ignores the floating block box, which is what we normally see--to make itself as much as possible in the same row as the floating element, resulting in a floating element covering

The sibling element is an inline element: The sibling element is as close as possible around the floating element.

2. Affecting parent elements

The floating element is detached from the normal stream, so that the parent element that contains it does not automatically brace itself for the existence of the floating element, which can cause a high collapse .

Clear float:

1. clear the Float with clear

The clear property defines the side on which the element is not allowed to appear floating elements.

In CSS1 and CSS2 , the upper margin is achieved by automatically clearing elements (that is, elements that have the clear attribute set).

In CSS2.1 , the clearance space is increased above the outer margin of the element, and the margin itself does not change.

Either way, the end result is the same, and if the declaration is left or right cleared, the element's Sisu border boundary is just below the margin of the floating element on that edge.

2. Clear floating with empty DIV

This is an older approach, with the exception of div , which uses other tags, but the Div is more applicable, since the display:block that the browser gives it , it has no other style, and does not have special features.

NoteDisplay:blockis the browser givesDiv, which exists in the browser'sUser Agent Stylesheet, but notDivdefaultDisplayis the value ofBlock, in thein, all theHTMLlabelDisplaythe default values areinline. )

Code:

<div class= "ele float" >box 2</div>

<div style= "Clear:both" ></div>

<div class= "ele float" >box 3</div>

3.overflow methods (using BFC and haslayout)

Set the overflow value to hidden or auto on the parent element of the floating element , and you can close the float.

You also need to trigger haslayout in IE6 , such as setting the container width height for the parent element or setting the zoom:1

4. Use : after pseudo-element method (only to avoid the problem of parent element height collapse)

Combine : after pseudo-element (note that this is not a pseudo-class, but a pseudo-element that represents the most recent element after an element) and Iehack , which is perfectly compatible with the major browsers of the current mainstream.

Relatively speaking, this approach is not only perfectly compatible with the mainstream browser, and is also very convenient, the use of reusable classes, you can reduce code writing, and the structure of the page will be more clear.

Code:

<style>

. clearfix {/* triggers haslayout */zoom:1;}

. clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}

</style>

<div class= "box Clearfix" >

<div class= "main left" > I set the floating float:left</div>

<div class= "aside left" > I am the footer, but I also set the float to the right. </div>

</div>

Reference article: http://www.zhangxinxu.com/wordpress/?p=583

Http://kayosite.com/remove-floating-style-in-detail.html

Http://www.w3school.com.cn/cssref/pr_class_float.asp

Http://www.w3school.com.cn/cssref/pr_class_clear.asp

CSS float with clear float