float и clearfix

float

Свойство float позволяет сделать обтекание текста вокруг объекта float:left; - слева
float:right; - справа

Ширина блока, для которого не задано свойство width по умолчанию равна 100% Если мы добавляем к элементу свойство float, то его ширина обжимается до контента

Были времена, когда с помощью float верстали, но сейчас это считается плохой практикой. Но для создания обтекания блока текстом альтернативы ему нет.

clear

Свойство clear - позволяет игнорировать блоку действие float'ов с заданной стороны.

clear:left; clear:right; clear:both

clear:both

Обычно для того, чтобы float'ы не распространялись за нужные нам пределы делают блок с классом clearfix

<div class="clearfix">
</div>

css для класса clearfix следующий

.clearfix {
    clear:both;
    width:100%;
}

Обтекание неправильных форм

http://www.html5rocks.com/en/tutorials/shapes/getting-started/

@supports

    @supports (shape-outside: circle(50%)){
      .element{
            shape-outside: circle(50%);
      }
    }

Практика:

1. Картинка, которую текст обтекает справа
2. Вывести меню с одинаковым отступами между элементами
3. Вывести шахматную доску 3*3, используя float
4. Создание «прилипающих» sidebar’ов слева и справа
5. Выведение нескольких «плавающих» картинок одна под другой (clear:both)
6. Сделать много блоков разной высоты, но одинаковой ширины. В ряд помещается три блока. Сделать несколько рядов таких блоков
7. Сделать обтекание текста вокруг круглой картинки
8. Делаем блок круглым там, где поддерживается обтекание вокруг круга (используем @supports). По умолчанию блок квадратный, с обтеканием вокруг квадрата.