USER-MASTER.ORG

Вторник, 03 ноября 2015 10:49

Float - поплавок

В данный момент, в целях самообразования, прохожу один серьезный видеокурс по HTML и CSS. В принципе я когда-то самостоятельно для себя изучал уже HTML и CSS, но это было давно, а технологии не стоят на месте. Да и я сам редко когда пользуюсь в полную силу HTML и CSS. Многое забывается, а некоторое оказывается было понято не совсем так, как надо. Решил обновить свои знания, вспомнить, что уже было изучено когда-то.

Дошел до темы "Макетирование с помощью CSS". Рассматривается вопрос по поводу свойства CSS float:left для элемента <div>. Обычно, когда говорят о свойстве float, то употребляют слово "обтекание". Это слово, "обтекание", употребляется и в статьях, которые во множестве есть в Интернете, и в книгах, и, кстати, в этом видеокурсе, который я сейчас смотрю. И только сейчас до меня наконец дошло, что на самом деле означает это свойство. Я никогда по настоящему не верстал сайты, поэтому такое тугодумство для себя я прощаю.

Во-первых, как я считаю, слово "обтекание" нужно вообще здесь забыть, а применять другое слово - "поплавок". Тогда всё становится на свои места.

Рассмотрим сначала слово обтекание. Далее привожу примеры из того видеокурса, который я сейчас изучаю.

Допустим у нас есть такой HTML код:

<!DOCTYPE html>
<html>
<head>
<title>Использование стилей: float</title>
<style type="text/css">
div {width:60px; height:60px}
#red{background:red}
#green{background:green}
#blue{background:blue}
#yellow{background:yellow}
#maroon{background:maroon}
</style>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="yellow"></div>
<div id="maroon"></div>
</body>
</html>

Выглядеть это всё в браузере будет следующим образом:

Это называется - нормальный поток, когда элементы <div> идут один за одним, один под одним. Даже если они имеют ширину, меньшую, чем ширина родительского элемента. Обычно элемент <div> заполняет 100% ширины родительского элемента. Теперь назначаем первому и второму <div> свойство float:left. Смотрим код ниже.

<!DOCTYPE html>
<html>
<head>
<title>Использование стилей: float</title>
<style type="text/css">
div {width:60px; height:60px}
#red{background:red; float:left;}
#green{background:green; float:left;}
#blue{background:blue; width:100px; height:100px}
#yellow{background:yellow}
#maroon{background:maroon}
</style>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="yellow"></div>
<div id="maroon"></div>
</body>
</html>

Выглядит это всё в браузере следующим образом:

В этом случае говорят, что элемент <div>, к которому применено свойство float:left выпадает из нормального потока. Другие элементы <div> его как бы не замечают. В данном случае видно, что синий квадратик (элемент <div>) оказался под красным и зелёным квадратиком (элементы <div> со свойством float:left). Элемент <div> с синим фоном специально сделан большего размера, чтобы его было видно.

Посмотрим на элемент <div> с красным фоном (красный квадратик). К нему применено свойство float:left. Здесь обычно употребляют слово "обтекание". Но возникает вопрос: "Что и кого здесь обтекает?" Зелёный квадратик вроде бы обтекает красный, но почему-то справа от красного квадратика, хотя имеем left. Синий квадратик вообще подлез под два предыдущих. Тогда, что же здесь обтекает и с какой стороны!?

Вот это слово "отбетакание" реально меня сбивало с толку. Если мы переведём слово float в Гугл.Переводчике, то оно нам выдаст слово "поплавок". Вот тут всё и встаёт на свои места. Если к первому элементу <div> применено свойство float:left, то в этом случае он просто всплывает как поплавок над другими элементами, т.е. выпадает из нормального потока. А поскольку имеем значение left, то элемент прилепляется к левому верхнему углу родительского элемента.

Следующий элемент <div> с зелёным фоном тоже имеет свойство float:left, и он также всплывает над другими элементами, и также прилепляется к левому верхнему углу родительского элемента (в данном случае body), но там уже стоит другой элемент с красным фоном, который идет раньше. Поэтому зелёный квадратик лепится справа к красному квадратику, т.е. занимает свободное место.

Вот оно как оказывается!

Прочитано 582 раз Последнее изменение Вторник, 03 ноября 2015 11:56

Добавить комментарий

Защитный код
Обновить

Поиск