0

Ну совсем непонятное явление. Не помог ни Гугл, ни игра с 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;">&nbsp;</p>
    <h2>Абзац</h2>
  </div>
</div>

введите сюда описание изображения

4 ответа 4

2

clear: left Это правило гарантирует, что все элементы, к которому применено свойство, будут смещены ниже ВСЕХ перемещаемых влево элементов.

Так как у нас .left-bar имеет float: left; и находиться до применения clear: left, clear: left опустилось ниже блока .left-bar (см. скрин).

введите сюда описание изображения

1
  • Странно, что разработчики сделали clear абсолютным. Вполне разумным было бы реализовать его локальным, действующим в своей области видимости...
    – Deus
    Commented 4 янв. 2018 в 16:59
1

Как уже правильно сказали, вложенность не имеет значения. На вскидку, единственное что могу предложить overflow: hidden; для правого блока (что бы вложенные элементы не обращали внимание на то, что находится вне родителя), если это приемлемо ...

.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;
	overflow: hidden; // Собственно "трикс" ...
}
<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;">&nbsp;</p>
    <h2>Абзац</h2>
  </div>
</div>

1
  • Спасибо, попробую использовать. У меня лишь примитивный пример, проект реализован намного сложнее, но другого выхода просто нет!
    – Deus
    Commented 4 янв. 2018 в 15:22
1

Вот тут говорят, что clear работает сразу на все уровни (https://stackoverflow.com/questions/30885721/css-how-to-clear-a-floating-object-only-one-level-not-the-all-the-way-to-the-l)

Почему бы не использовать флексбокс для лэйаута?

https://jsfiddle.net/k5z15sds/

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
}

.left-bar {
  flex: 0 0 200px;
  height: 400px;
  background: red;
}

.right-bar {
  flex: 1;
  height: 700px;
  background: #adc6e7;
}
4
  • Я не уверен, что flex поддерживается всеми браузерами, включая мобильные. И, кроме того, почему же в моем случае элементы ведут себя подобным образом?
    – Deus
    Commented 4 янв. 2018 в 14:32
  • Я не спец по флоату. Видимо флоат очищается незавимо от степени вложенности. (Так написано по той ссылке, по крайней мере). Проверить браузерную поддержку (я думаю вы и так знаете) можно здесь caniuse.com/#search=flexbox Commented 4 янв. 2018 в 14:45
  • для браузерной поддержки можно таблицей сверстать Commented 4 янв. 2018 в 14:47
  • Как сказал @DanielKhoroshko "флоат очищается независимо от степени вложенности" и запрещает обтекание. В вашем случаи высота, которая появляется, зависит от высоты элемента .left-bar, т.к. у него есть float: left.
    – Kniha m
    Commented 4 янв. 2018 в 14:51
1

Это происходит из за контекста форматирования. Об этом почему-то не часто говорят, хотя знания о нем значительно уменьшит количество ошибок при верстке.

Блочный контекст форматирования может быть создан чем-либо из этого списка:

  1. корневой элемент или что-то, что содержит его
  2. плавающие элементы (элементы, у которых float не равно none)
  3. абсолютно позиционированные элементы (элементы, значение position которых либо absolute, либо fixed)
  4. «строчные блоки» (элементы с display: inline-block)
  5. И т.д.

Подробнее тут

Если хочется посмотреть в действие результат тут

В примере у класс wrap-box раскомментируйте любую строчку

.wrap-box{
  //display: inline-block;
  //display: flow-root;
  //float: left;
  //overflow: auto;
  //overflow: hidden;
  width: 100%;
  background-color:#aacccc;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.