Original text : all about floats
Translation : About the past and present life of floating
All rights reserved. Please indicate the source when reprinting. Thank you! !
What is a float?
Float is a positioning property of css. We can look at typographic design to understand its origins and role. In a print layout, text can surround the image as desired. This method is generally called "text wrapping".
Here is an example:
In typesetting software, the text box can be set to allow mixed layout of images and text, or to ignore it. No text-to-image mixing will allow the text to appear on top of the image as if it wasn't even there. This is the difference between whether an image is part of the page flow or not. Web design is very similar to this.
In web design, page elements to which CSS's float attribute is applied are like images surrounded by text in a typographic layout. Floated elements are still part of the flow of the web page. This is a significant difference compared to using absolutely positioned page elements. Absolutely positioned page elements are removed from the flow of the page, just like text boxes in print layouts are set to ignore page wrapping. An absolutely positioned element will not affect other elements, and other elements will not affect it, regardless of whether it is next to other elements.
Set a float with CSS on an element like this:
#sidebar { float: right; }
The fload attribute has four available values: Left and Right float the element to its respective direction, None (default) makes the element not float, and Inherit will get the float value from the parent element.