Спасибо, LSerni, вы решили это для меня.

Для этого:

+-----------------------------------------+
| +-------+                     +-------+ |
| | Text1 |                     | Text1 | |
| +-------+                     +-------+ |
|+----------------------------------------+

Вы должны сделать это:

<div style="overflow:auto">
    <div style="display:inline-block;float:left"> Text1 </div>
    <div style="display:inline-block;float:right"> Text2 </div>
</div>

Поместите ваш плавающий div(s) в div и в CSS дайте ему overflow:hidden;, он будет работать нормально.

В некоторых случаях, т. е. когда (если) вы просто используете float для подачи элементов на одну и ту же «строку», вы можете использовать

display: inline-block;

вместо

float: left;

В противном случае использование элемента clear в конце работает, даже если оно может пойти против зерна, чтобы потребовался элемент для выполнения работы CSS.

Нет ничего пропавшего. Float был разработан для случая, когда вы хотите, чтобы изображение (например) сидело рядом с несколькими абзацами текста, поэтому текст обтекает изображение. Этого не произойдет, если текст «растянет» контейнер. Ваш первый абзац закончится, а затем ваш следующий абзац начнется под изображением (возможно, несколько сотен пикселей ниже).

И именно поэтому вы получаете результат.

Причина

Проблема в том, что плавающие элементы являются вне потока :

Элемент называется из flow , если он плавает, абсолютно позиционируется или является корневым элементом.

Поэтому они не воздействуют на окружающие элементы как поток in-flow .

Это объясняется в 9.5 Floats :

Поскольку float не находится в потоке, до и после потока флоат-боксов вертикально, как если бы поплавок не существовал. Однако текущие и последующие линейные поля, созданные рядом с поплавком, сокращаются по мере необходимости, чтобы освободить место для поля поля для поплавка.

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling:after {
  content: 'Block sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}

<div class="float"></div>
<div class="block-sibling">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>

Это также указано в 10.6 Расчет высот и полей . Для «нормальных» блоков ,

Учитываются только дети в нормальном потоке (т. Е. Плавающие поля и абсолютно позиционированные поля игнорируются [...])

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: 'Block parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 130px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}

<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

Решение Hacky: зазор

Способ решения проблемы заключается в том, что какой-то элемент потока находится ниже всех поплавков. Затем высота родителя будет расти, чтобы обернуть этот элемент (и, следовательно, и поплавки).

Этого можно достичь с помощью свойства clear :

Это свойство указывает, какие стороны поля (ов) элемента могут не быть смежными с более ранним плавающим полем.

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: 'Block parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 84px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
.clear {
  clear: both;
  text-align: center;
  height: 37px;
  border: 3px dashed pink;
}
.clear:after {
  position: static;
  content: 'Block sibling with clearance';
  color: pink;
}

<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra.
  <div class="clear"></div>
</div>

Таким образом, решение добавляет пустой элемент с clear: both в качестве последнего собора поплавков

<div style="clear: both"></div>

Однако это не является семантическим. Поэтому лучше сгенерировать псевдоэлемент в конце родителя:

.clearfix::after {
  clear: both;
  display: block;
}

Существует несколько вариантов этого подхода, например. используя устаревший синтаксис двоеточия :after для поддержки старых браузеров или использование других блоков , таких как display: table.

Решение: Корни BFC

Существует исключение из проблемного поведения, определенного в начале: если элемент блока устанавливает Block Formatting Context (является корнем BFC), тогда он также переносит его плавающее содержимое.

Согласно 10.6.7 «Авто» высоты для корня контекста форматирования блоков ,

Если у элемента есть какие-либо плавающие потомки, край нижнего края которых ниже элемента нижняя граница содержимого, затем высота увеличивается, чтобы включить эти края.

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent.bfc-root:after {
  content: 'BFC parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 127px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

<div class="block-parent bfc-root">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

Кроме того, как объяснено 9.5 Floats , корни BFC также полезны из-за следующего:

Граница поля таблицы, элемент замещения на уровне блока или элемент в нормальном потоке, который устанавливает новую форму блока tting context [...] не должен перекрывать поле поля любых поплавков в том же контексте форматирования блока, что и сам элемент.

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling.bfc-root:after {
  content: 'BFC sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

<div class="float"></div>
<div class="block-sibling bfc-root">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>

Контекст форматирования блока установлен

• Блокировка блоков с overflow кроме visible, например hidden

  .bfc-root {
    overflow: hidden;
    /* display: block; */
  }
  

• Блокировать контейнеры, которые не являются блочными блоками: когда display установлен на inline-block, table-cell или table-caption.

  .bfc-root {
    display: inline-block;
  }
  

• Плавающие элементы: когда float установлено на left или right.

  .bfc-root {
    float: left;
  }
  

• Абсолютно позиционированные элементы: когда position установлен на absolute или fixed.

  .bfc-root {
    position: absolute;
  }
  

Обратите внимание, что они могут иметь нежелательные побочные эффекты, такие как отсечение переполненного содержимого, вычисление автоматической ширины с помощью алгоритма shrink to-fit из потока. Таким образом, проблема заключается в том, что невозможно иметь элемент блочного уровня в потоке с видимым переполнением, который устанавливает BFC.

Дисплей L3 решает эти проблемы:

Создал внутренние типы отображения flow и flow-root , чтобы лучше выразить типы раскладки типов отображения и создать явный переключатель для создания элемента a BFC root. (Это должно устранить необходимость в хаках, таких как ::after { clear: both; } и overflow: hidden [...])

К сожалению, пока нет поддержки браузером. В конце концов мы сможем использовать

.bfc-root {
  display: flow-root;
}

Вот более современный подход:

.parent {display: flow-root;} 

Больше нет clearfixes.

p.s. Использование переполнения: скрыто; скрывает тень окна ... так же

Рекомендация W3Schools:

поместить overflow: auto в родительский элемент, и он «окрасит» весь фон, включая поля элементов. Также плавающие элементы будут оставаться внутри границы.

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix

Как говорит Лукас, то, что вы описываете, является предполагаемым поведением для свойства float. То, что сбивает с толку многих людей, заключается в том, что float был сильно вытеснен из-за своего первоначального предполагаемого использования, чтобы восполнить недостатки в модели макета CSS.

Посмотрите на Floatutorial , если вы Мне хотелось бы лучше понять, как это свойство работает.