Applying Floats to Your Layouts
div { float: left; }
Overcoming Float Problems
1. Clearing and Containing Floats
CSS property
clean: prevents an element from wrapping around floats.
footer { clear: left }
footer { clear: right }
footer { clear: both }
clear means clear float
containing floats
solutions
1. add a clear element at the bottom of the containing div
br.clear { clear: both; }
2. float the containing element
make sure add a clear property to whatever element follows the floated container
3. use overflow:hidden at the containing block
overflow: hidden;
it forces the containing block to expand and contain the floated elements.
NOTE: if you have any absolutely positioned elements inside the container, they may not show up
4. use the micro clear fix
.clear:after {
content: " ";
display: table;
clear: both;
}
demos:
https://github.com/kiwiwin/css-workshop/tree/master/css_layout/float_based
2. Creating Full-Height Columns
3. Preventing Float Drops With Box-Sizing
box-sizing: border-box;