Блочная верстка div

Замучался постоянно искать мелкие нюансы блочной Div верстки, решил их все отобразить в своем блоге.

Как можно использовать блочную верстку:
Блоку  DIV можно, даже можно сказать нужно применять таблицу стилей, а именно
Высота блока: width:100px;
Ширина блока: height:100px;
Выравнивание блока по левому краю: float:left;
Выравнивание блока по правому краю: float:right;
Расположение по умолчанию: float:none;
Блок опускается ниже предыдущего элемента, который выравнивается по левому краю: clear:left;
Блок опускается ниже предыдущего элемента, который выравнивается по правому краю: clear:right;
Блок опускается ниже любого предыдущего выравненного элемента: clear:both;
Нет ограничений, на положение блока относительно выравненных элементов: clear:none;

Пример использования ниже:
<div style="background:red; width:150px; float:left;">1</div>
<div style="background:blue; width:100px; float:left; ">2<br>материал<br>материал</div>
<div style="background:gray; width:130px; float:left;">3<br>материал</div>
<div style="background:green;">4<br>материал<br>материал<br>материал</div>

1
материал
2
материал
материал
3
материал
4
материал
материал
материал