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

Posted 2023-03-06

【中文标题】如何使 HTML 列表环绕浮动内容

【英文标题】：How to make HTML lists wrap around floated content

【发布时间】：2019-04-07 13:24:58

【问题描述】：

假设我有一个 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 会导致任何意想不到的后果吗？

【参考方案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>