Ну совсем непонятное явление. Не помог ни Гугл, ни игра с CSS-свойствами. Прошу помощи здесь.
На странице два блока - левая колонка (float:left
) и правая (основное содержимое).
Так вот, если в правой колонке использовать для какого-либо элемента свойство float:left
, и даже после этого очистить float
(clear:left
или clear:both
), то последующие неплавающие элементы внезапно выравниваются по уровню левой колонки, которая никакого отношения к правой колонки не имеет.
.wrapper {
width:100%;
height: 100%;
box-sizing: border-box;
}
.left-bar {
float: left;
width:200px;
height: 400px;
background: red;
}
.right-bar {
height: 700px;
margin-left: 210px;
background: #adc6e7;
}
<div class="wrapper">
<div class="left-bar">
<p>Левая колонка</p>
</div>
<div class="right-bar">
<img style="float:left;" src="https://cdn.fishki.net/upload/post/2017/03/19/2245758/tn/06-funny-cat-wallpapercat-wallpaper.jpg" width=410 />
<div style="margin-left:420px;">
<p>Строчка 1</p>
<p>Строчка 2</p>
</div>
<p style="clear:left;"> </p>
<h2>Абзац</h2>
</div>
</div>