Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use float in CSS", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use float in CSS" this article.

Floating basics

Floats have four properties: left (left float), right (right float), none (no float), and inherit (inheritance).

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

A floating element is offset to the left (or right) 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, text and line-level elements surround the element, and block-level elements are not affected.

Float a non-replacement element for which a width must be declared, otherwise the width of the element tends to zero.

The margin (outer margin) of a floating element is not merged with the margin of other elements.

An in-depth study of floating

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

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

Floating elements cannot overflow the left, right, and upper boundaries of the containing block, only the lower boundaries. When floating elements overflow the lower boundary, some browsers increase the height of the inclusion block, so that floating elements can be included in the inclusion block, resulting in large blanks, resulting in browser compatibility problems. )

When a floating element sets a negative margin, although the floating element appears to overflow the containing block, it does not actually violate the above rule.

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

Negative effect of floating

The background cannot be displayed.

The frame cannot be stretched.

Margin padding does not display correctly

Clear the method of floating

/ * method 1, invalid when the parent containing block is reduced to one * / .clear-float2 {overflow:hidden; width:100%;} / * method 2 the overflowhidden attribute is equivalent to letting the parent stick to the content, so that it can cling to the contents of its object, thus clearing the float. * / .clear-float3 {overflow: auto; zoom: 1;} / * method 3 float is dealing with compatibility issues. Both hidden and auto can clear floats. It is said that auto is more friendly to seo * / above is all the content of this article "how to use float in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.