Вирівнювання плаваючих блоків (float)

Якщо потрібно розмістити блоки зліва чи справа - для них використовується стиль float.

Після використання стиля float як правило потрібно використати блок зі стилем clear.


				.left-box { float: left; }

				.right-box { float: right; }

				.clear { clear: both; }


				<div class="wrap">

				  <div class="left-box">Блок зліва</div>

				  <div class="right-box">Блок зправа</div>

				  <div class="clear"></div>

				  <p>Текст після блоків</p>

				</div>

float: left;

float: right;

Clear не треба використовувати лише в тих випадках, коли текст повинен обтікати довкола блока. В сучасній комерційній верстці цей прийом використовується дуже рідко. Приклад можна глянути на вікіпедії - текст обтікає довкола фотографій.

Плаваючі блоки (зі стилем float) не впливають на звичайні блоки (без цього стиля), але впливають на їх текстовий (інлайновий) вміст.

Плаваючі блоки автоматично стають блочними, їм не треба задавати стиль display (стиль буде проігноровано). Строчним елементам можна буде задавати розміри, вертикальні відступи. Щоправда, на відміну від блочних елементів, плаваючі блоки намагаються зайняти не 100% ширини батьківського блока, а якомога меншу ширину.

Поексперементуйте у пісочниці jsFiddle.

Щоб батьківський елемент не схлопувався - використовуються такі методи:

Домашнє завдання

Використайте у ваших проектах плаваючі блоки, розмістіть елементи веб-сторінок в горизонтальних напрямках