我在容器中有四个 div，其中三个是 float 的，最后一个是没有 float 的普通 div。为什么我的文本 div 放在所有三个 float div 的下方，而我的文本 div 的高度将所有三个 float div 的高度加在一起？理论上， float 元素是从元素流中取出来的，所以我的文本div应该放在容器的最顶部，它的高度应该只是行高？请帮助我。
#fd
{
width:100px;
height:150px;
background-color:red;
float:left;
}
#sd
{
width:150px;
height:100px;
background-color:blue;
float:left;
}
#td
{
width:100px;
height:100px;
background-color:green;
float:left;
}
#container
{
width:300px;
height:500px;
background-color:darkgray;
}
#text
{
background-color:aqua;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="basic.css">
<title>Insert title here</title>
</head>
<body>
<div id=container>
<div id=fd></div>
<div id=sd></div>
<div id=td></div>
<div id=text>aaaaaaabbbbb</div>
</div>
</body>
</html>最佳答案
举个简单的例子，考虑您的标记和以下 CSS。
在 CSS 中， float 元素首先从流中取出，然后定位常规内容。
然后通过将内容包裹在 float 元素周围来为 float 元素分配空间，以便将 float 元素放置在尽可能靠左并尽可能靠近包含 block 的上边缘(考虑到其他 float 元素)。文本/内容环绕 float 元素的边缘。
要全面了解其中的细微差别，您需要阅读有关 float 工作原理的 CSS 规范。
引用:http://www.w3.org/TR/CSS21/visuren.html#floats
在您的示例中，由于 float 元素足够宽或足够高，因此常规的流入内容从 float 元素的底部边缘开始，该内容尽可能靠近父 block 的顶部边缘考虑到 float 元素的尺寸后出现。
.container {
width: 300px;
border: 1px dotted blue;
overflow: auto;
}
.floater {
float: left;
width: 50px;
height: 50px;
}
#fd {
background-color: red;
}
#sd {
background-color: blue;
height: 100px;
}
#td {
background-color: green;
}<div class="container">
<div class="floater" id="fd"></div>
<div class="floater" id="sd"></div>
<div class="floater" id="td"></div>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing.</div>
</div>关于css - 为什么我的 "text"div 的高度考虑了所有 float div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29710709/