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

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

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

Ранее разметка страниц осуществлялась с помощью таблиц.

Роль свойства float возросла после перехода с table-верстки на div-верстку. Это объясняется тем, что float позволяет веб-разработчику включать столбцы не прибегая к таблице. Оно может принимать значения right, left, но не center.

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

С помощью свойства display: block; или display: inline; мы преобразуем один тип прямоугольника в другой. Например, список UL, который имеет ряд блоков LI, можно расположить горизонтально:

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

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

При использовании свойства float прямоугольник является блочным, но с характерной особенностью: его ширина не будет распространяться на всё содержимое. Например, заголовок h3 выглядит как:

это HEADER h3

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

это HEADER h3

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

это HEADER h3

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

это HEADER h3

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

Верхний текст остаётся неизменным, поскольку плавающий элемент не может располагаться выше строки, в которой он создан.

это HEADER h3

А вот красный текст находится под заголовком и он будет его обтекать, не имея при этом никаких дополнительных стилей. И только высота h3 будет преодолена, страница вернётся к естественному порядку.

АБВГНесколько плавающих элементов будут соблюдать последовательность своего расположения.
<p><span style="float: left;">А</span><span style="float: right;">Б</span><span style="float: left;">В</span><span style="float: right;">Г</span>текст...</p>
А выравнивание производится по самому нижнему краю тех букв, которые находятся на одной стороне.

АБВГ Если мы ходим, чтобы обтекание элемента было прекращено с определённого момента (отсюда), применяется свойство clear. Его мы можем добавить в пустой тег <div style="clear:both;"></div>

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

Блок 1

Блок 2

Блок 3

Блок 4

<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, то из-за того, что плавающим элементам не будет хватать пространства, они будут смещаться вниз.

Блок 1

Блок 2

Блок 3

Блок 4

<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:

Блок 1

Блок 2

Блок 3

Блок 4

<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>

Табличная вёрстка очень удобна и понятна, наверное, поэтому появился её аналог display: table;. Та же форма получается при меньшем использовании кода.

Блок 1

Блок 2

Блок 3

Блок 4

<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 определяет горизонтальное и вертикальное расстояние между границами ячеек.

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

Блок 1

Блок 2

Блок 3

Блок 4

<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>

И последнее, что хочется показать - ситуацию, когда нужно достичь обтекания изображения с двух сторон. Собственно говоря картинка соответствует моему настроению, когда мне всё же удалось добиться этого эффекта.

#imagen-center {margin-left:-60px;} равен #texto-L:before, #texto-R:before {width: 60px;} и составляет половину ширины изображения плюс 10px. #texto-R:before {height: 110px;} равна высоте изображения + 10px.

<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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSFZ61uFu-x8p2U16glRg-H11M_h8-yV_RdLHJo6ylO-wHypZqqIIUe9oeOHxZ5zmRsvygIaHc-62Q9slUe7EEamXPGOKA5VLNB7LkVxc3QWKJ7YC0ro33woRaKJFwIiRHShC9JYY-PmC/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.