如何使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>