Float
Floating takes an element out of the normal flow of the page, either to the left or to the right. Text elements will automatically wrap around the floated element.
Values
left: element moves to the left and following elements move to the right of that element
right: element moves to the right and following elements move to the left of that element
In Action
If I add a class to my image such as
.leftimg {float: left;}, I should end up with the text
(that follows) wrapping around my image. The more text you have here, the more dramatic this will be. If you make your browser less wide, the float will also become more obvious.
Clear
To stop an element from flowing with or wrapping around a floated element, use clear. Values for clear include:
left, right, both, none, and inherit.
.text {clear: both;}
Menu
Float and clear can be extremely helpful if you are creating a horizontal navigation bar using a list.
Here is my HTML:
My CSS looks like this:
.horizon li {float: left; list-style: none;}
.horizon a {display: block; width: 150px; background: white; margin: 10px; text-align: center;}The important properties are display and float. The other properties are just personalized styling. I could also customize the styles for other link states. Keep in mind you may need to add the clear property to surrounding elements.