В то время как существуют лучшие инструменты для создания макетов, такие как flexbox и grid, в будущем я напишу тест, в котором нужно будет использовать float для создания макета, и поскольку мне трудно понять, как работает float, я решил, что смогу научиться, объяснив это в своем блоге.
Возможно, это будет кому-то полезно, хотя, скорее всего, нет.
Основы
Прежде чем погрузиться в макеты, давайте начнем с простого обводки текста.
Это то, для чего в основном используется float, сначала у нас есть изображение и два абзаца.
Затем мы применим стилизацию float:right к изображению и получим аккуратный плавающий эффект.
<img style="float:right" src="cat.jpg" alt="cat">
<p>This is a very pretty cat, and a very simple text. </p>
<p>This is another very simple text, but a bit longer. </p>
Если мы не хотим, чтобы второй текст плавал слева от кошки, мы можем просто применить к нему стиль clear:both, чтобы игнорировать плавающие элементы.
<img style="float:right" src="cat.jpg" alt="cat">
<p>This is a very pretty cat, and a very simple text. </p>
<p style="clear:both">This is another very simple text,
but a bit longer. </p>
Плавающие блоки
Теперь мы можем перейти к чему-то более эскизному, а именно к плавающим блокам как инструменту компоновки. После некоторого времени, проведенного за выяснением того, как работают плавающие блоки, я вижу, что это не так уж и сложно. Но я объясню некоторые вещи, которые поначалу казались довольно странными.
Здесь у нас есть два простых блока, ни один из которых пока не имеет float.
Странное поведение № 1 – когда вы даете первому блоку float влево, он перемещается немного ниже.
Странное поведение № 2 – в то время как содержимое обходит плавающий элемент, сам блок не обходит, поэтому половина его находится под красным блоком.
Изменение положения первого блока вызвано тем, что маржа плавающих элементов перестает сворачиваться, из-за чего маржа блока немного отдаляется от верха документа, а маржа первого блока добавляется дополнительно.
Второе поведение – это как раз то, как работает float с неплавающими блоками, поэтому при создании макетов с плавающими элементами его нужно давать обоим блокам:
Другим интересным фактом является то, что когда ваш второй элемент является элементом flexbox, он не заходит под плавающий элемент (проблема с margin все еще остается, поэтому вы должны использовать float для второго элемента независимо от этого).
Здесь синий элемент имеет display: flex;.
Попробуйте сами!
Если вы хотите поиграть с плавающими блоками, попробуйте этот кодепен (нажмите на кнопки свойств):