Question

我不明白为什么<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl"> <div> <product ></product> </div> </div>只识别div#footer占用的空间。

由于浮动元素已从正常流程中取出，div#navigation{float:right}应忽略div#footer和float:right元素。

我不是要将float:left添加到clear:both。我很好奇它是如何发生的。

＆＃13;

div#footer

＆＃13;

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;
}

＆＃13;

我不明白为什么<!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元素。

Answer 1

当元素浮动时，它们是文档的removed from the normal flow。要完全理解它，这意味着您需要首先考虑放置在正常流程中的元素，然后您可以考虑使用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元素的底部。

Answer 2

如果你想避免花车，请选择内联块。只需确保在html中避免使用空格，因为它需要在浏览器中占用空白区域。

同样使用font-size：0到父元素，并为其子元素提供所需的font-size。

为什么div采用浮动元素的尺寸？

2 个答案: