CSS - Почему ящики в контейнере, когда float НЕ используется? - PullRequest
Новая
       15

CSS - Почему ящики в контейнере, когда float НЕ используется?

1 голос
/ 10 сентября 2011

Почему, когда у меня есть три блока в блоке без плавающих их, внешний блок оборачивается вокруг них, но когда я добавляю плавающий элемент, внешний блок разрушается? 

<html>
<head></head>
<body>
<style>
#OuterWrapper {
    height: 100%;
    width: 200px;
    border: 1px BLACK dotted;
    text-align: left;
}

.Box {
    float: left; // remove this float and the outer wrapper wraps the three boxes
    height: 50px;
    width: 50px;
    background: BLUE;
    border: 1px WHITE SOLID;
}
</style>
<div id="OuterWrapper">
    <div class="Box"></div>
    <div class="Box"></div>
    <div class="Box"></div>
</div>
</body>

Ответы [ 3 ]

2 голосов
/ 10 сентября 2011

Это потому, что плавающие элементы не влияют на размер родительского элемента.Вы можете использовать стиль overflow, чтобы элемент содержал дочерние элементы.

Также: у вас должен быть тег doctype, чтобы страница не отображалась в режиме Quirks.Ваш элемент style должен быть в элементе head.Тег </html> отсутствует. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#OuterWrapper {
    width: 200px;
    border: 1px BLACK dotted;
    text-align: left;
    overflow: hidden;
}

.Box {
    float: left;
    height: 50px;
    width: 50px;
    background: BLUE;
    border: 1px WHITE SOLID;
}
</style>
</head>
<body>
<div id="OuterWrapper">
    <div class="Box"></div>
    <div class="Box"></div>
    <div class="Box"></div>
</div>
</body>
</html>
0 голосов
/ 10 сентября 2011

Попробуйте добавить стиль overflow:hidden; к разделителю оболочки.

0 голосов
/ 10 сентября 2011

Вы должны очистить после нижнего div: 

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

Использование clear: both заставит div внешнего упаковщика продвинуться ниже последнего всплывающего окна.Вот полный фрагмент: 

<div id="OuterWrapper">
    <div class="Box"></div>
    <div class="Box"></div>
    <div class="Box"></div>
    <div style='clear: both'></div>
</div>

Конечно, вы также можете создать вспомогательный класс в вашем CSS-файле: 

.ClearBoth {
    clear: both;
}

и применить этот класс к div после последнего поля.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...