当图像浮动到它们的左侧时，p标签不会中断

Question

我正在尝试在页面上设置段落并将图像浮动到每个段落的左侧，并使文本环绕浮动图像。当我这样做时段落在它的图像旁边正常浮动，但是p标签不会中断，它只是级联，好像所有内容都是内联的。

我在整个网站中使用这些类来浮动图像，它在其他任何地方都很有效：

.img_left {
    float: left;
    margin: 0 20px 1em 0;
}
.img_right {
    float: right;
    margin: 0 0 1em 20px;
}

这是我的代码，其中包含重复的确切问题： http://jsfiddle.net/MNdpV/

我错过了什么？谢谢！

Answer 1

我将您的图片移动到各自的<p>标记中，并将overflow: auto添加到段落中 如下：

#content p {
   overflow: auto;
}

，这给出了以下内容：http://jsfiddle.net/audetwebdesign/UEAad/

这相当于清除你的花车。

这种方法的优点是它也适用于正确的浮动图像。

设置overflow: auto会创建一个块格式化上下文，这意味着任何浮动的子元素都被约束到父容器。

Answer 2

似乎clear: left; img正在发挥作用。

http://jsfiddle.net/4gSNt/ （链接更新）

clear: left;使img标记不会彼此对齐，但会从开头开始并从头开始。