причина

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

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

следовательно, они не влияют на окружающие элементы, как in-flow элемент.

это объясняется в 9.5 поплавки:

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

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>

хаки решение: зазор

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

это может быть достигнуто с помощью the 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 для поддержки старых браузеров, или с помощью других block-level отображается как display: table.

решение: корни BFC

есть исключение проблемное поведение, определенное в начале: если элемент блока устанавливает Контекст Форматирования Блока (является корнем BFC), то он также обернет его плавающее содержимое.

по данным 10.6.7' Auto ' heights для корней контекста форматирования блоков,

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

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 поплавки, корни BFC также полезны из-за следующего:

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

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

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

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

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

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

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

W3Schools рекомендации:

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

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

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

display: inline-block;

вместо

float: left;

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

спасибо 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>

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

.parent {display: flow-root;} 

больше никаких исправлений.

p. s.Using overflow: hidden; скрывает поле-тень так...

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

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