我不明白为什么div#footer只承认所占用的空间div#navigation{float:right}.
由于浮动元素从正常流中取出,因此div#footer应忽略两者float:right和float:left元素.
我不是想添加clear:both到div#footer.我只是好奇它是如何发生的.
body {
margin: 0;
padding: 0;
background: #ccc;
}
#container {
width: 600px;
margin: 0 auto;
}
#header {
padding: 30px;
background: #bbb;
}
#content {
float: left;
width: 460px;
background: #fff;
}
#navigation {
float: right;
width: 140px;
height: 200px;
background: #eee;
}
#footer {
background: #aaa;
padding: 10px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Floats 101</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<p>
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.
</p>
</div>
<div id="navigation">
navigation
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>我不明白为什么div#footer只能识别所占用的空间div#navigation{float:right}.
由于浮动元素从正常流中取出,因此div#footer应忽略两者float:right和float:left元素.
Tyl*_*erH 10
当元素浮动时,它们将从文档的正常流中移除.要完全理解它,这意味着您需要首先考虑放置在正常流程中的元素,然后您可以考虑使用float属性删除它们.
因为#navigation和#content元素都是浮动的,所以它们将从正常文档流中删除.这会将#footer元素移动到元素的顶部#container.它现在有效地定位在两个浮动元素的"下面".
您看到"页脚"文本的原因仍然是所有未清除的文本都包裹浮动元素(请记住,float设计用于在嵌入图像周围包装文章文本,如杂志文章中所述).在这种情况下,文本容器的整个宽度将与浮动元素从一侧到另一侧填充,因此文本将被推送到一个新行.
你的例子很难直观,所以看看这个:
body {
margin: 0;
padding: 0;
background: #ccc;
}
#container {
width: 600px;
margin: 0 auto;
}
#header {
padding: 30px;
background: #bbb;
}
#content {
float: left;
width: 460px;
height: 190px;
background: #fff;
}
#navigation {
float: right;
width: 140px;
height: 220px;
background: #eee;
}
#footer {
background: #aaa;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Floats 101</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
Content
</div>
<div id="navigation">
navigation
</div>
<div id="footer">
Curabitur feugiat feugiat purus. Aenean eu metus. Nulla facilisi. Veni quis justo vel massa suscipit sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut tincidunt metus arcu vel lorem.
</div>
</div>
</body>
</html>正如您所看到的,文本仍然包围#navigation元素的底部.