HTML and CSS Reference
In-Depth Information
In the above example, the
<p>
element is a block-level element, so it
ignores the floated element, spanning the width of the container (minus
padding). All non-floated, block-level elements will behave in like manner.
The text in the paragraph is inline, so it flows around the floated element.
The floated box is also given margin settings to o
"
set it from the paragraph,
making it visually clear that the paragraph element is ignoring the floated
box.
Clearing Floats
Layout issues with floats are commonly fixed using the CSS
clear
property,
which lets you “clear” floated elements from the left or right side, or both
sides, of an element.
Let's take a look at an example that commonly occurs — a footer wrapping
to the right side of a 2-column layout:
