Доступно про float: left и как равномерно разместить блоки div на CSS

Все элементы, которые встречаются на HTML-странице есть не что иное, как прямоугольники. И в основном только двух типов:

1. блочные (blok), которые занимают всю ширину, где находятся, и отделены от того, что над и под ними. Например, это теги DIV, P, H.
2. встроенные (inline). Например, SPAN, STRONG, EM, A и IMG.

<div>
   <p>Ранее разметка страниц осуществлялась с помощью <strong>таблиц</strong>.</p>
   <p>Роль свойства <a href="#">float</a> возросла после перехода с table-верстки на div-верстку. Это объясняется тем, что float позволяет веб-разработчику включать столбцы не прибегая к таблице. Оно может принимать значения <em>right</em>, <em>left</em>, но не <em>center</em>.</p>
</div>

• ПУНКТ
• ПУНКТ
• ПУНКТ

• ПУНКТ
• ПУНКТ
• ПУНКТ

это HEADER h3

Если ему задать свойство display: inline;, то мы увидим, что изменилась не только ширина, но и расстояние над и под элементом:

это HEADER h3

Но если я хочу разместить элемент справа и добавлю на этот раз text-align:right;, то мы получим:

это HEADER h3

И совсем иначе, если float: right;. Обратите внимание, что расстояние над и под элементом остались неизменными:

это HEADER h3

А как поведут себя элементы, находящиеся рядом с заголовком?

<div style="width: 100%; float: left;">
    <div style="float: left; width: 25%;">Блок 1</div>
    <div style="float: left; width: 25%;">Блок 2</div>
    <div style="float: left; width: 25%;">Блок 3</div>
    <div style="float: left; width: 25%;">Блок 4</div>
</div>
<div style="clear: both;"></div>

А где расстояние между блоками? Если задать отступы margin и padding, то из-за того, что плавающим элементам не будет хватать пространства, они будут смещаться вниз.

<div style="width: 100%; float: left;">
    <div style="float: left; width: 25%; margin: 10px; padding: 10px;">Блок 1</div>
    <div style="float: left; width: 25%; margin: 10px; padding: 10px;">Блок 2</div>
    <div style="float: left; width: 25%; margin: 10px; padding: 10px;">Блок 3</div>
    <div style="float: left; width: 25%; margin: 10px; padding: 10px;">Блок 4</div></div><div style="clear: both;"></div>

Вопрос решается путём добавления ещё одного DIV:

<div style="width: 100%; float: left;">
  <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;">
      Блок 1
    </div>
  </div>
  <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;">
      Блок 2
    </div>
  </div>
  <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;">
      Блок 3
    </div>
  </div>
  <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;">
      Блок 4
    </div>
  </div>
</div>
<div style="clear: both;"></div>

<style type="text/css">

.tablica {
  display: table; 
  width: 100%; 
  border-spacing: 10px 10px; 
} 

.yacheika {
  display: table-cell; 
  padding: 10px; 
}
</style>

<div class="tablica">
  <div class="yacheika">Блок 1</div>
  <div class="yacheika">Блок 2</div>
  <div class="yacheika">Блок 3</div>
  <div class="yacheika">Блок 4</div>
</div>

, где border-spacing определяет горизонтальное и вертикальное расстояние между границами ячеек.

Теперь видно каким образом строится галерея изображений. Код картинок, надеюсь, никто не позабыл.

<div class="konteiner">
  <div class="yacheika" ><img src="адрес_изо"/><br>Блок 1</div>
  <div class="yacheika" ><img src="адрес_изо"/><br>Блок 2</div>
  <div class="yacheika" ><img src="адрес_изо"/><br>Блок 3</div>
  <div class="yacheika" ><img src="адрес_изо"/><br>Блок 4</div>
</div>

<style type="text/css">
#contenedor-center {
margin: 0 auto;
position: relative;
width: 620px; 
text-indent: 0px;} 
#imagen-center { 
position: absolute;
top: 0;
left: 50%;
margin-left: -60px; 
}
#texto-L, #texto-R {width: 49%;} 
#texto-L {float: left;} 
#texto-R {float: right;} 
#texto-L:before, #texto-R:before {
content: ""; 
width: 60px; 
height: 110px;} 
#texto-L:before {float: right;} 
#texto-R:before {float: left;} 
#contenedor-center p {margin:0;}
</style>

<div id="contenedor-center"><img id="imagen-center" src="http://4.bp.blogspot.com/-yrI7Ea0IoX8/TcEkmd-f3qI/AAAAAAAAB2g/7YkRIG6kKGs/s100/happy-blogger.jpg"><div id="texto-L"><p style="text-align: right;">текст...</p></div><div id="texto-R"><p style="text-align: left;">текст...</p></div></div>
<div style="clear: both;"></div>

Ссылки на источники: www.alistapart.com, softwaremaniacs.org, vagabundia.blogspot.com, www.smashingmagazine.com.