The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. With CSS float, an
element can be pushed to the left or right, allowing other elements to wrap around it. Floated elements remain a part of the flow of the web page, unlike
elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage.
Elements float horizontally (right or left) and not vertically (up or down). When an element has been specified to float, it will
move to the left or right as much as it can. The elements after the floating element will flow around it. This is very similar to what you would see
on a magazine page. Values for the float property are left, right, none, and inherit. Most of the time, you will specify the right and left values.
Here is a typical example on how you would float an image to the left and allow text to flow around it.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
consequat massa quis enim.
Clear Property
Elements after the floating element will flow around it. To avoid this, use the clear property. Possible values are left, right, both, none, and
inherit. For example, if you wanted to display text on the page after two elements that have been floated, and you do not want the text
to flow around the floated elements, you can specify that the next element be styled with clear:both. This way, the next element will clear
both elements and not flow around them.
You can then assign this class to a paragraph after one or more elements that have been floated. The paragraph will clear the previous element and not flow
around it.
Please help us spread the word by socializing it today!
Did you find something wrong with the information on this page? Please take a moment to report it to us
so that we can continue to improve the quality of the information on this site. Click here to
report an issue with this page.
Recommended Books & Training Resources
