You have seen that, by default, consecutive blocks (one immediately following another in the source code) stack on top of each other.
There is no space between these two stacked blocks because they do not have top/bottom margins.
The CSS float property causes blocks to float side-by-side.
This is only useful for blocks with set widths, because otherwise they would expand horizontally leaving no space to float side-by-side.
Float Left 1
Float Left 2
Float Left 3
Yikes - Still Floating
Yikes - Still Floating
Once you start floating blocks, you have to clear the float to resume normal page layout flow. You need to see how that is done in the source code.
Float Right 1
Float Right 2
Float Right 3
Cleared the float again to resume normal page layout flow after the right floated blocks above. See source code for additional comments.
Floating blocks left is very commonly used for creating columns in Web pages.
However, right floated blocks are harder to work with since their display order is reversed from the order the divs occur in the HTML source code. (Think about why.)
The original purose of the float style property was to make text flow around things, like these floated images. (Here the float is not cleared so that the text can flow completely around the Scoob graphics.) But developers quickly found other uses for float such as creating columns in a page.... 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. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.