为什么文本或图像不放在浮动元素后面？

Question

为什么文本或图像没有放在浮动元素后面？

在这个link:http://codepen.io/anon/pen/LVWmvp，你可以看到例子。 "blue" div 放在 "transp" div 后面。但问题是文本（或图像）也没有放在 "transp" div 后面。请注意 p 标签位于 "blue" div.

所以我的问题是：为什么会这样？为什么文本不像他的父项那样放在"transp"div后面？

我一直在寻找答案。但是我找不到任何东西来解释这种情况。

你能帮帮我吗？ :)

这是您可以在 codepen.io 上找到的代码： HTML

<div id="transp">
</div>

<div id="blue">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dolor scelerisque, pellentesque arcu sed, vehicula enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis felis eros, accumsan eget erat non, vulputate blandit urna. Sed consequat nibh vitae lectus tempor viverra. Quisque condimentum, elit id pretium accumsan, quam nunc faucibus risus, id tincidunt massa est in turpis. </p>
</div>

CSS:

#transp{
    border: 1px solid #000;
    height:200px;
    width:200px;
    float:left;
}

#blue{
    background-color:#00ffff;
    height:200px;
    width:600px;
}

您将看到以下内容：

Answer 1

浮动的要点是在旁边一段文字或其他内嵌内容放置一个对象，这样内容就会在周围流动] 它。来自 spec:

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

让文本忽略浮动会完全破坏浮动的目的。

浮动元素从正常流中移除，这就是为什么 "blue" div 的位置就像浮动元素不存在一样。因此，任何垂直流过浮动元素的文本都将直接从下方开始，而不是在那里留下间隙。如果您使 div 变窄变高（或删除高度声明），您会看到这一点。

Answer 2

简单的答案：因为您在 #transp 上有一个 float:left。这样做是告诉浏览器#transp 应该转到正常流的左侧，强制任何后续的块元素（div）在左侧容忍它。实际上，#transp 变得像一个内联元素，但具有大小。

在 display: inline-block 出现之前，这是让事情连续进行的方式。如今，有了更先进的 css 技术，浮动通常被认为是布局的不良做法，因此应避免将它们与表格一起使用。

为什么文本或图像不放在浮动元素后面？

Why the text or images are not placed behind a floating element?

css

floating

css-float