In CSS, what does it mean by Floating elements – how to use them, troubles with them, and how to work around the troubles?
Float property can be used to align an entire block element to the left or right such that other content flows around it.
For instance, Float is used for wrapping text around images or create table-like columns in an HTML layout without the use of tables.
The most common problems of float-heavy layouts are:
The “collapsing parent”.
(a) Fix 1: one of the most common ways to fix a collapsed parent element is to place an element with the clear property after the floated element. This will cause the parent to begin reflowing after the floated element.
(b) Fix 2: There is a method that allows a parent element to clear itself of any floated elements inside it. It uses a CSS property called overflow with a value of hidden. Note that the overflow property was not intended for this type of use, and could cause some issues such as hiding content or causing unwanted scrollbars to appear.
In IE 7, the Bottom Margin Bug is when if 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.