Родительская высота не следует за их поплавковыми детьми

Моя основная высота контейнера не соответствует ширине их детей

и вот мой код, есть ли у вас какие-либо предложения, пожалуйста, посоветуйте.

Мне нужно решение CSS, а не JavaScript, поэтому заранее заблаговременно

<div id="mainContainer">
    <div id="leftContent">

    </div>

    <div id="rightContent">

    </div>
</div>

и вот мой css

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;
}
#leftContent{
    height: 100px;
    float: left;
    width: 380px;
    background-color: violet;
}
#rightContent{
    height: 100px;
    float: right;
    width: 620px;
    background-color: yellow;
}

Ответ 1

Добавить overflow:hidden; в контейнер:

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden; /* <--- here */
}

Поскольку его содержимое плавает, контейнер div сворачивается. Используя класс clearfix или, как я уже упоминал, добавление overflow:hidden приведет к тому, что контейнер будет содержать плавающие элементы.

ОБНОВЛЕНИЕ Объяснение, почему это работает, можно найти здесь: fooobar.com/questions/111320/...

... и здесь:

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

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Ответ 2

Вам нужно очистить плавающие элементы, используйте overflow: hidden; для #mainContainer

Демо

Alternate: (Вы можете добавить clear: both;, чтобы очистить поплавки)

Демо

Или вы можете также очистить плавающие элементы (только если вы хотите поддерживать IE9 = +

.clear:after {
  content: "";
  clear: both;
  display: table;
}

Почему это происходит?

Ответ 3

Использовать переполнение: скрывать и очищать float

#mainContainer{
    width: 1000px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden;
    clear: both;
}