This demo requires Live View in Dreamweaver or a web browser in order to see the results of the CSS float property.
If viewing this page in a web browser, make the browser narrower and wider to see the effect.
If viewing this page in Dreamweaver, set it to Live view and use the grab bar (the vertical bar on the right edge of the view area) to make the width narrow and wide to see the effect.
The colored squares are each a discrete div element.
Each div that makes a square has the CSS float:left; property:value; applied to it.
Divs are block elements.
By default, when block elements are uninterrupted in the code, they ought to appear in the browser as a single column, stacked one on top of the other, in the order that they are listed in the code.
However, when floated, block elements will be "taken out of the natural flow" of the page.
Subsequent block elements will move up to the side specified by the float property.
In this example, float results in each square floating to the left edge with subsequent content moved up to the right of it.
Also, the squares will wrap to accommodate the width of the container that the div elements are in. The container in this situation is the body element. Make it wider and then narrower to see the effect.
The float property can be temporarily commented out to demonstrate the difference of float and non-float (default) behavior.
Copy the code of this page and paste it into a new empty html document in Dreamweaver.
Be sure to delete any pre-existing code before pasting the code from this page into the new file.
Then make the viewing area narrow and wide to see the float effect.
Then comment out the float in the style element at the top of the page, like this: /*float: left;*/