Почему верхний край элемента html игнорируется после размещения элемента?

У меня есть страница с двумя div. Первый плавает. Второй имеет "четкую: как" декларацию CSS, так и большую верхнюю границу. Однако, когда я просматриваю страницу в Firefox или IE8, я не вижу верхнего поля. Похоже, что второй div касается первого div, а не разделяется. Есть ли способ сделать верхний край работать правильно?

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

Вот пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS test</title>
</head>
<body>
     <div style="float: left; border: solid red 1px">foo</div>
     <div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>

Ответы

Ответ 1

Вы правильно определили проблему. Плавающий <div> больше не используется для вычисления верхнего поля, а для этого 2 <div> просто прикладом друг к другу. Простой способ решить эту проблему - просто обернуть 2-й <div>. Это позволит обертки (невидимо) встать против первого <div> и позволить вам указать для этого пробел.

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

<div style="float: left; border: solid red 1px">foo</div>
<div class="wrapper" style="clear: both; padding-top: 90px;">
    <div style="border: solid red 1px">This div should not touch the other div.</div>
</div>

Ответ 2

вы можете просто добавить div между ними

<div style="float: left; border: solid red 1px">foo</div>
<div style="clear:both;"></div>
<div style="margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>

и это должно позаботиться об этом.

Многие темы WordPress (и не только) используют эту технику

Ответ 3

Во втором div:

float: none; display: inline-block;

Таблица совместимости для браузеров: http://caniuse.com/#feat=inline-block

Ответ 4

Открытый ключ; без контейнеров и дополнительных `<div>`

Другой ответ был почти прав, но пропустил width: 100%. Вот исправленная версия.

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

Очистка без этого width: 100% требует, чтобы плавающий элемент находился в хорошо отмеченном контейнере или нуждался в дополнительном семантическом пустом <div>. И наоборот, строгое разделение контента и надбавок требует строгого решения CSS к этой проблеме, т.е. без какого-либо дополнительного не-семантического HTML.

Сам факт, что нужно отметить конец поплавка, не позволяет автоматическую верстку.

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

Это решение широко используется на моем веб-сайте, чтобы решить проблему, когда текст рядом с плавающей миниатюрой короткий, а верхний край следующего очищающего объекта не соблюдается. Он также предотвращает любое ручное вмешательство при автоматическом создании PDF файлов с сайта.

Ответ 5

установите "float: left" на второй div

Ответ 6

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>CSS test</title>
</head>
<body>
   &nbsp;
   <div style="float: left; border: solid red 1px; height:40px;">foo</div>
   <div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>

Ответ 7

Другой способ - добавить пустой абзац с четким как после последнего плавающего div.

<p style="clear:both"></p>

Ответ 8

Добавьте это ниже плавающего div и над тем, который вы хотите нажимать на страницу:

<div class="clearfix"></div>

Затем в вашем файле css добавьте:

.clearfix {clear: both;}

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