如何使HTML列表环绕浮动内容

Question

假设我有一个HTML图形，它的周围有文本包装：

<figure style="float:left">…</figure>
<p>stuff</p>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
<dl>
<dt>foo</dt>
<dd>bar</dd>
</dl>

这很简单；该图将向左浮动，段落列表将环绕右侧的图。

不过，项目符号列表看起来很奇怪；项目符号不会与上面的段落内容对齐。对于定义列表<dl>，<dt>和<dd>元素都是左对齐的，即使我的样式表给了<dd>一个左边距，例如

原因似乎是浮动元素不会使容器围绕它，而只是容器内容。所以<ul>没有包装，只是里面的内容。所以<p>和<ul>框实际上向左延伸，到浮动图，只有内容包装到右边。因此，<dl>的左边距是相对于页面的左边距的，并且由于用于浮动的空间远大于所请求的左边距，因此在内容被包装之后不添加额外的边距。

现在看来，我可以添加一个简单的修复程序，神奇地使它在我的示例页面上看起来更好：

ul, ol, dl {
overflow: auto;
}

基本上，这可以防止边距合并，并使容器本身包围图形。换句话说，它可以防止浮点与它们的边距合并。它看起来和我预想的一样！

但是…这似乎很容易，而且有点错误。例如，为什么我不将此应用于<p>？这会在未来引发什么问题？如果我在某个地方添加了一些背景色，如果<p>有一个通过浮动的边距，但列表没有，这会引起问题吗？

总之，当列表环绕浮动时，让列表看起来正确的最佳方法是什么？使用overflow: auto会造成任何意外的后果吗？

Answer 1

ul, ol, dl,dd {
/*   overflow: auto; */
padding:0;
margin:0;
}
ul li{
/*set position for li style*/
/*list-style-position: inside;*/
/*list-style-position: outside; */
/* or for remove li style */
list-style: none;
}
.clearfix:after{
clear:both;
content:"";
display:block;
}
.float-right{
float:right;
}
.float-left{
float:left;
}
.wrapper{
background:red;
width:300px;
}
.wrapper-detail{
background:blue;
width:calc(100% - 100px);/* .wrapper's width - figure's with */
}
figure{
width:100px;
margin:0;
background:green;
}

<div class="wrapper clearfix">
<figure class="float-left">…</figure>
<div class="wrapper-detail float-right">
<p>stuff</p>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
<dl>
<dt>foo</dt>
<dd>bar</dd>
</dl>  
</div>
</div>