Understanding the box model - Every element you create in your markup produces a box on the page, so an XHTML page is actually an arrangement of boxes. By default, the border of each element box isn’t visible and the background of the box is transparent. When setting the properties of an element like width, padding, and margins you are really setting the properties of the inside of the invisible box they are in.
How big is a box? - You can set the width of an element box using the width property. If you don’t add padding to elements, they are also the width and will be touching the edges of the box. Adding a border or filling the background of the box helps visualize where and how big it is.
Floating and clearing - The float property is primarily used to float text around images but is also used to create multi-column layouts. When you float an image or any element you are asking it to be pushed as far as possible to the left or right of the parent element. Another frequently used property is clear, which is used so elements won’t move up next to a floated element.