Float

Обтекание + очистка

• float: left;
• clear: left;
• float: right;
• clear: rigth;
• clear: both;

Обтекание

float: right

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quod voluptate quidem consequatur earum nostrum id consequuntur. Dolore sint, architecto voluptate nostrum enim a nam molestias possimus iste numquam totam.

Sint doloremque nostrum velit, voluptatem iste, officiis in, consequuntur nobis maiores itaque nam est quo non quod porro nulla accusamus eum deleniti dicta dignissimos minima. Eos perferendis molestiae reprehenderit dolorum. Nihil eos ipsa consectetur consequuntur qui enim et rem quis, error soluta? Deserunt necessitatibus vel assumenda sapiente molestias est ipsum aut voluptatum fugit. Reiciendis vitae quod laudantium tempora, eveniet quis?

Обтекание

float: left

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quod voluptate quidem consequatur earum nostrum id consequuntur. Dolore sint, architecto voluptate nostrum enim a nam molestias possimus iste numquam totam. Sint doloremque nostrum velit, voluptatem iste, officiis in, consequuntur nobis maiores itaque nam est quo non quod porro nulla accusamus eum deleniti dicta dignissimos minima.

Eos perferendis molestiae reprehenderit dolorum. Nihil eos ipsa consectetur consequuntur qui enim et rem quis, error soluta? Deserunt necessitatibus vel assumenda sapiente molestias est ipsum aut voluptatum fugit. Reiciendis vitae quod laudantium tempora, eveniet quis?

Обтекание требует очистки

Высота текста меньше высоты float

float: right

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quod voluptate quidem consequatur earum nostrum id consequuntur. Dolore sint, architecto voluptate nostrum enim a nam molestias possimus iste numquam totam.

Обтекание + очистка

img {float: right}

.box {clear: right}

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quod voluptate quidem consequatur earum nostrum id consequuntur. Dolore sint, architecto voluptate nostrum enim a nam molestias possimus iste numquam totam.

Обтекание + очистка

Очистка - обертка с классом clearfix

 
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
        

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quod voluptate quidem consequatur earum nostrum id consequuntur. Dolore sint, architecto voluptate nostrum enim a nam molestias possimus iste numquam totam.

overflow: hidden вместо clear

Задается обертке. Возможный, но менее предпочтительный способ

 
      .overflow {
        overflow: hiiden;
      }
              

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quod voluptate quidem consequatur earum nostrum id consequuntur. Dolore sint, architecto voluptate nostrum enim a nam molestias possimus iste numquam totam.

FLOAT как способ управления блоками

float: left;

Зачистки нет, высота родителя 0

Нижний блок занимает место блока с float

Текст в нижнем блок обтекает элементы с float

FLOAT как способ управления блоками

float: right;

Зачистки нет, высота родителя 0

Нижний блок занимает место блока с float

Текст в нижнем блок обтекает элементы с float

FLOAT как способ управления блоками

float: right; float: left;

Порядок объявления float определяет приоритет расстановки

FLOAT как способ управления блоками

Порядок объявления float определяет приоритет расстановки

float: left; float: right;

FLOAT как способ управления блоками

float: left;

Зачистки clerfix для родителя

FLOAT как способ управления блоками

float: right;

Зачистки clerfix для родителя

FLOAT как инструмент верстки макета

2 column layout

FLOAT как инструмент верстки макета

3 column layout