У меня есть страница с двумя 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>