ShlackBaum
@ShlackBaum

Почему float не создает переноса строки?

Читаю: "Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки."

Разбираюсь на пальцах:
<div class="" style="background-color: red;">Первый </div>
	<div class="" style="background-color: green;>Второй </div>
	<div class="" style="background-color: yellow;">Третий </div>

Пока все логично. Каждый блок начинается с новой строки.
Но добавляя float
<div class="" style="background-color: red;">Первый </div>
	<div class="" style="background-color: green; float: right">Второй </div>
	<div class="" style="background-color: yellow;">Третий </div>

5db4400831b46905443255.png
второй и третий блоки оказываются на ОДНОЙ строчке.

Почему третий див не отображается с третьей строчки, а "прыгает" на вторую? Почему float внезапно ломает определение блочных элементов, если прямым текстом описано, что "он всегда начинается с новой строки"?

Наверное самый логичный ответ: "потому что это float" - но у меня никак не получается усвоить "как это работает", хотя гуглил и спецификацию дива и флоата.
  • Вопрос задан
  • 74 просмотра
Пригласить эксперта
Ответы на вопрос 1
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Почему float внезапно ломает определение блочных элементов
так потому что он делает обтекание элемента. Сначала почитайте про его свойства. Элемент, которому дали float начитает обтикать предыдущий элемент
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы