Из спецификации CSS я могу узнать, что:
Поскольку поплавок отсутствует в потоке, непозиционированные блоки блоков, созданные до и после блока поплавка, перемещаются вертикально, как если бы поплавок не существовал.
Таким образом, это означает, что любые непозиционированные, не плавающие смежные элементы вокруг плавающих элементов должны действовать так, как если бы плавающий элемент не существовал, верно? И это прекрасно работает, если у первого элемента нет содержимого. Но как только он имеет некоторый текст, текст появляется ниже плавающего элемента, который он не должен и должен перемещать под плавающим элементом.
<head>
<style>
#left {
float: left;
width: 50%;
}
#right {
width: 40%;
}
div {
padding: 2px;
background-color: brown;
}
section {
margin-left: 5px;
padding: 2px;
background-color: dodgerblue;
}
</style>
</head>
<body>
<section id="left">
<h2>Content</h2>
<p>Good stuff</p>
</section>
<div id="right">
FOOBAR
</div>
</body>
Здесь текст «FOOBAR» появляется ниже плавающего раздела и не перемещается под ним. Даже если мы удалим ширину элемента FOOBAR, он появляется справа от плавающего элемента, а не под ним.
Как смежные элементы на самом деле работают с плавающими элементами. Я пробовал много видео, но ни один из них не объясняет это.