A description of the CSS Basics float

The previous time wrote a CSS basic knowledge of the position, at that time, the understanding of float is not very accurate, was MU class network more than readers pointed out (the original text has been amended, if misleading is sorry). Float for more in-depth study, here to share the learning experience to everyone.

Basic knowledge of floating

There are 4 properties for floating: Left (floating), right (floating), none (non-floating), Inherit (inherited).

The containing block of a floating element is its nearest block-level ancestor element.

The floating element is left offset (or right offset) until its outer boundary touches the inner boundary of the containing block or the outer boundary of another floating element.

Floating elements are separated from the standard document stream, and text and line-level elements surround the element, and block-level elements are unaffected.

Floating a non-replacement element, you must declare a width for the element, or the width of the element tends to be 0.

The margin (margin) of a floating element is not merged with the margin of another element.

Floating in-depth study

The top edge of a floating element cannot be higher than the top of a block-level element or row-level element that was previously generated in the containing block.

Floating elements cannot overlap, and if there is not enough space in the horizontal direction to place the floating elements, it will move down until there is enough space or no more floating elements.

Floating elements cannot overflow the left, right, and top boundaries of the containing block, but can overflow only the lower boundary. (When floating elements overflow the bottom boundary, some browsers increase the height of the containing block, allowing floating elements to be included in the containing block, resulting in large gaps, causing browser compatibility issues.) ）

When floating elements set negative margins, the floating element appears to overflow the containing block, but it does not actually violate the above rules.

In special cases, floating elements overflow in the opposite direction of the offset when the floating element is wider than the containing block.

Negative effects of floating

Background cannot be displayed

Borders cannot be stretched

Margin padding does not display correctly

How to clear floating

/* Method 1, invalid */.clear-float2{Overflow:hidden when the parent containing block is indented one bar; width:100%;}   The/* Method 2,overflow:hidden property is equivalent to having the parent cling to the content so that it fits inside its object, allowing for clear float. */.clear-float3{overflow:auto; zoom:1;}   /* Method 3,zoom is dealing with compatibility issues, hidden and auto can clear the float, said auto is more friendly to SEO * *

Above this CSS basic knowledge of the float is a small part of the content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.