Floating elements – how to use them, troubles with them, and how to work around the troubles?
Float property is used for wrapping text around images, Floats can be used to create entire web layouts and are also helpful for layout in smaller instances.
The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables
One of the most common symptoms of float-heavy layouts is the “collapsing parent”. One of the most common ways to fix a collapsed parent element is to place an element with the clear property after our floated element. This will cause the parent to begin reflowing after the floated element. In IE 7, the Bottom Margin Bug is shown when a floated parent has floated children inside it, bottom margin on those children is ignored by the parent.
Quick fix:using bottom padding on the parent instead.