float: осталось удалить, включая div?

Question

Я не очень понимаю, что здесь происходит.

Это мой CSS и HTML

#content {
    -moz-border-radius:10px;
    background:#F0F0F0;
    width: 910px;
    margin: 0 auto;
    clear: both;
}

#content ul {
list-style: none;
padding: 0;
margin: 0;
}

<div id="content">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>

Я получаю серую коробку с элементами, выровненными по вертикали. Я хочу выровнять их по горизонтали, и я прочитал, что я должен поместить float: left в селектор #content ul. Если я это сделаю, серый блок div исчезнет, ​​а три записи li останутся вертикальными. Если я поместил float: left в селектор #content ul li, записи теперь горизонтальны, но все еще вмещающее поле исчезает.

Чего мне не хватает?

Answer 1

float ed элементы на самом деле не заставляют контейнерный элемент расширяться вниз, чтобы удерживать их (они будут плавать за дном контейнера). Что вам нужно сделать, это добавить элемент после списка с clear:both как часть его стиля, чтобы заставить его опуститься ниже поплавков, и, таким образом, заставить границы контейнера расширяться ниже поплавков. (В качестве альтернативы вы можете установить фиксированную высоту для элемента контейнера.)

Answer 2

Добавьте высоту в UL вместе с вашим другим CSS.

#content ul
{
    height: 20px;
}

#content ul li
{
    float: left;
}

ИЛИ вы можете использовать следующие без высоты на UL

#content ul li
{
    display: inline;
}

ИЛИ вы можете поместить элемент ниже UL, который очищается.

CSS:

.clear
{
    clear: both;
    height: 1px;
}

HTML:

<ul>
    <li></li>
    <li></li>
</ul>
<div class="clear"></div>

ИЛИ (для хорошей меры) вы можете добавить высоту к div-элементу для переноса

CSS:

.wrappingDiv
{
    height: 20px;
}

ОБЪЯСНЕНИЕ: Плавающие элементы находятся за пределами обычного потока вашего контента. Поэтому обертывающие элементы не «осведомлены» о высоте всплывающих элементов.