Возвращение в прошлое: Поплавки и макеты

В то время как существуют лучшие инструменты для создания макетов, такие как 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;.


Попробуйте сами!

Если вы хотите поиграть с плавающими блоками, попробуйте этот кодепен (нажмите на кнопки свойств):

Оцените статью
Procodings.ru
Добавить комментарий