CSS float предотвращает расширение страницы - PullRequest
Новая
       1

CSS float предотвращает расширение страницы

3 голосов
/ 12 января 2011

Я думаю, что это очень распространенный сценарий.

Я относительно (не каламбур) новичок в CSS, и у меня возникла проблема с выравниванием с плавающей точкой. У меня есть два div s, один из которых будет содержать основной контент для размещения left, а другой для навигации, который должен быть перемещен right.

В любом случае, вот что происходит, когда я не применяю форматирование CSS. Это желаемое поведение; страница будет прокручиваться вниз, как и ожидалось:
Желаемое поведение

Вот что происходит, когда я применяю float: left или float: right к соответствующим элементам:
нежелательное переполнение страницы

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

Фрагмент моего HTML: 

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="content">
    <div id="main">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary">
        <p>Lorem ipsum [...snip...]</p>
    </div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

и соответствующий CSS: 

#content {
    padding:10px;
    padding-top: 110px;
    padding-bottom:60px;   /* Height of the footer */
}

#main {
    padding: 10px;
    float: left;
    width:70%;
    text-align:left;
}

#secondary {
    padding: 10px;
    float: right;
    width:20%;
}

Почему это происходит, и как я могу это исправить?

Ответы [ 5 ]

1 голос
/ 18 января 2011

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

Я немного изменил ваш код 

<body>
<div id="wrapper" class="clrfx">
    <div id="header"></div>
    <div id="content">
    <div id="main" class="clrfx">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary" class="clrfx">
        <p>Lorem ipsum [...snip...]</p>
    </div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

CSS: 

.clrfx:after {
    clear: both;
    display: block;
    content: "";
}

Практическое правило: присваивайте class = "clrfx" любому элементу Div, у которого есть хотя бы один дочерний элемент с плавающей точкой. Некоторые люди используют <div class="clear"></div>, но это НЕ СЛЕДУЕТ использовать, поскольку очистка является частью стиля, а не разметки.

В худшем случае, если вам придется использовать это, я бы посоветовал использовать 

<br class="clear" />

потому что разрывная линия близка к очистке

0 голосов
/ 12 января 2011

Чтобы ваша оболочка содержала все плавающие элементы, просто установите; 

#wrapper {overflow: hidden;}

Просто, и все готово. Без дополнительной разметки.

0 голосов
/ 12 января 2011

Как вы сказали, вы новичок в CSS: плавающие элементы не имеют высоты. Поэтому #content устанавливается по умолчанию на минимальную высоту, которая является общей высотой отступов.

Добавление <div style="clear:both;"></div> после div#secondary заставит его опуститься ниже всплывающих элементов. Так как этот div имеет высоту, он заставляет #main вести себя как ожидалось. См. ответ Юджи для примера кода.

0 голосов
/ 12 января 2011

Плавающие элементы удаляются из потока, поэтому они не учитываются при вычислении высоты их родительского элемента, а их родительский элемент установлен на overflow: visible.

Вы можете либо поместить фиктивный элемент под плавающими элементами (принудительно установив фиктивный элемент в правильное место с помощью свойства clear), либо установить для родительского элемента значение, отличное от overflow: visible.

0 голосов
/ 12 января 2011

Очистите поплавки, и вы должны быть в порядке.

Например, согласно вашему примеру: 

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="content">
    <div id="main">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary">
        <p>Lorem ipsum [...snip...]</p>
    </div>

    <!-- clear -->
    <div style="clear:both;"></div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

Обновление: для старых браузеров IE, очищающему div может потребоваться определенная высота, чтобы присвоить ему свойство hasLayout, иначе он будет игнорировать этот div. http://www.satzansatz.de/cssd/onhavinglayout.html

Как правило, люди делают определение класса со всей этой информацией, поэтому вам нужно всего лишь набрать <div class="clear"></div>

Вот пример надежной очистки CSS от http://sonspring.com/journal/clearing-floats

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

Существуют альтернативные методы очистки поплавков в родительском div и удаления дополнительного структурного тега <div>, но я лично не чувствую необходимости исследовать, являются ли они пуленепробиваемыми, если это решение определенно таково.

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

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

...