html - 当图像 float 到它们的左侧时，p 标签不会中断

Question

我正在尝试在我的页面上设置段落并将图像 float 到每个段落的左侧，并让文本环绕 float 图像。当我这样做时，段落会正确地漂浮在它的图像旁边，但 p 标签不会中断，它只是级联，就好像一切都是内联的一样。

我在我的整个站点中使用这些类来 float 图像，它在其他任何地方都很好用:

.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/

这相当于清除 float 。

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

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