Странное поведение расположения
Я немного смущен. Вот маленькая веб-страница. Существует два основных отделения: вершина и mainBlock.
Сначала содержит изображение. Проблема состоит в том, что поджигатель показывает, что высота div#top равна 0, и из-за этого следующее отделение mainBlock перемещается вверх. Если я удалил бы эту часть кода:
div#logo{
float: left;
}
все начнет хорошо работать, и div#mainBlock будет ниже div#top. Могли Вы, объясняете меня, как это работает и как избежать этого надлежащим способом?
Вот мой код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Paralab - Website & interface design, web apps development, usability</title>
<style text="text/css">
html, body{
}
div#logo{
float: left;
}
#top{
width: 100%;
}
#mainBlock{
width:100%;
}
</style>
</head>
<body>
<div id="top">
<div id="logo">
<img alt="logo" src="img/logo.png" />
</div>
</div>
<div id="mainBlock">
Contact Us
</div>
</body>
</html>
4 ответа
Вам нужно очистить поплавок. Есть несколько способов сделать это, я бы ознакомился с этой статьей в QuirksMode об очистке плавающих точек для получения дополнительной информации.
, потому что он плавающий - добавьте clear: left; в свой класс mainBlock .
Я бы настоятельно рекомендовал вам использовать строгий доктайп вместо переходного. Вы получите более последовательное поведение в браузерах.
Плавающие изображения покидают поток документа. Установите #top {overflow: hidden;}