html - 当图像浮动到它们的左侧时，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/

我错过了什么？谢谢！

score 1 · Accepted Answer

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

#content p {
   overflow: auto;
}

这相当于清除您的浮动。

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

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

score 0 · Accepted Answer

似乎clear: left;onimg正在工作。

clear: left;使 img 标记彼此不对齐，而是划线并从头开始。

2 回答 2