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