Css 为什么是我的；“文本”；分区'；s高度是否考虑了所有浮球跳水？

容器中有四个div，其中三个是float，最后一个是普通div，没有float。为什么我的文本div放在所有三个浮点div下面，而文本div的高度将所有三个浮点div的高度加在一起？理论上，float元素是从元素流中取出的，所以我的text div应该放在容器的最上面，它的高度应该是行的高度？请帮帮我

#fd
{
宽度：100px；
高度：150像素；
背景色：红色；
浮动：左；
}
#sd
{
宽度：150px；
高度：100px；
背景颜色：蓝色；
浮动：左；
}
#运输署
{
宽度：100px；
高度：100px；
背景颜色：绿色；
浮动：左；
}
#容器
{
宽度：300px；
高度：500px；
背景色：暗灰色；
}
#正文
{
背景色：浅绿色；
}

在此处插入标题
AAAAAABBB

首先，您的容器宽度为300px，ur 3 div的宽度为350px。这意味着它溢出或从容器中推出文本div。如果没有帮助，请尝试使用 z指数：9999； 位置：绝对位置； 宽度：80%；

---

对于文本div

首先，您的容器宽度为300px，而ur 3 div的宽度为350px。这意味着它会溢出或从容器中推出文本div。如果这没有帮助，请尝试使用 z指数：9999； 位置：绝对位置； 宽度：80%；

---

对于文本div

我不太确定您想要实现什么，但是如果您将文本div放在顶部，然后在其后面（在三个浮动div之前）放置一个清除元素，您将最终得到顶部的文本。虽然我不得不改变其中一个div的宽度，使它们都适合300px宽的容器。。见下文：

HTML

---

我不确定你想达到什么目的，但是如果你把文本div放在顶部，然后在它后面放一个清除元素（在三个浮动div之前），你最终会把文本放在顶部。虽然我不得不改变其中一个div的宽度，使它们都适合300px宽的容器。。见下文：

HTML

---

作为一个简单的例子，考虑一下你的标记和下面的CSS。

在CSS中，浮动元素首先从流中取出，并定位常规内容

然后，通过环绕浮动元素的内容来分配空间，从而使浮动元素尽可能靠近包含块的上边缘（考虑其他浮动元素）。文本/内容环绕浮动元素的边缘

为了充分理解这些细微差别，您需要阅读CSS规范中关于浮动如何工作的内容

参考：

在您的示例中，由于浮动图元足够宽或足够高，因此常规流入内容从浮动图元的下边缘开始，该下边缘与父块的上边缘尽可能接近，在考虑浮动图元的尺寸后，内容可以显示

.container{
宽度：300px；
边框：1px点蓝色；
溢出：自动；
}
.漂浮物{
浮动：左；
宽度：50px；
高度：50px；
}
#fd{
背景色：红色；
}
#sd{
背景颜色：蓝色；
高度：100px；
}
#运输署{
背景颜色：绿色；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。整张脸上的脸是暂时的，而不是暂时的。芦苇的生命之源在于它的生命之源。努克·康莫多·马莱苏亚达·阿迪皮斯。
 > P>作为一个简单的例子，请考虑你的标记和下面的CSS。

在CSS中，浮动元素首先从流中取出，并定位常规内容

然后，通过环绕浮动元素的内容来分配空间，从而使浮动元素尽可能靠近包含块的上边缘（考虑其他浮动元素）。文本/内容环绕浮动元素的边缘

为了充分理解这些细微差别，您需要阅读CSS规范中关于浮动如何工作的内容

参考：

在您的示例中，由于浮动图元足够宽或足够高，因此常规流入内容从浮动图元的下边缘开始，该下边缘与父块的上边缘尽可能接近，在考虑浮动图元的尺寸后，内容可以显示


.container{
宽度：300px；
边框：1px点蓝色；
溢出：自动；
}
.漂浮物{
浮动：左；
宽度：50px；
高度：50px；
}
#fd{
背景色：红色；
}
#sd{
背景颜色：蓝色；
高度：100px；
}
#运输署{
背景颜色：绿色；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。整张脸上的脸是暂时的，而不是暂时的。芦苇的生命之源在于它的生命之源。努克·康莫多·马莱苏亚达·阿迪皮斯。
因为文本没有空格，而且容器顶部也没有空间。因此，它包裹并增加其父对象的高度（具有青色背景）。为了打断单词，添加'wordbreak:break all；`到元素。@HashemQolami，但红、蓝、绿div是浮点元素。text div应该是container div中的第一个元素，为什么text div甚至会看到float div，而在容器的顶部没有空间？float元素并没有从文档流中完全移除。它们只是沿着容器的左侧或右侧放置，允许行框沿着浮动的一侧流动。因为文本没有空格，容器顶部也没有空间。因此，它包裹并增加其父对象的高度（具有青色背景）。为了打断单词，添加'wordbreak:break all；`到元素。@HashemQolami，但红色、蓝色和绿色的div是浮动的
<div id=container>
<div id=text>aaaaaaabbbbb</div> 
<br class="clear" />
<div id=fd></div>
<div id=sd></div>
<div id=td></div>
</div>

#fd {
width:100px;
height:150px;
background-color:red;
float:left; 
}
#sd {
width:100px;
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;
}
.clear {
float: none;   
}
}