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>

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

1 个答案: