CSS Page Layout: Building Float-Based Layouts

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;