缩小与浮动元素共享空间的HTML元素的边界

发布于05月07日

当浮动元素占用一些空间时，"普通"文本就会腾出空间来容纳浮动元素.但普通文本周围的边界不与浮动元素相交，而是与浮动元素相交.

在下面的例子中，如何在蓝色框开始之前使第一个红色框结束，并且没有重叠？而让不需要与浮动元素共享空间的第二个红框仍然占据100%？

div#toc {
  float: right;
  width: 300px;
  padding: 20px;
  border: 1px solid blue;
}

div.warn {
  padding: 20px;
  border: 1px solid red;
}

<div id="toc">
  <h2>Table of contents</h2>
  <ol>
    <li>Chapter 1</li>
    <li>Chapter 2</li>
    <li>Chapter 3</li>
  </ol>
</div>
<div id="main">
  <h1>Chapter 1</h1>
  <p>In the beginning ...</p>
  <div class="warn">
    Fairy tale, watch out!
  </div>
  <p>... and were married happily ever after.</p>
  <div class="warn">
    Don't retell!
  </div>
</div>

推荐答案

建立独立格式上下文的块级框会缩小以避免浮动.让盒子建立块格式化上下文(在这种情况下是最合适的独立格式化上下文类型)的最直接方法是赋予它display: flow-root.

在浮动上使用margin来创建间隙.

div#toc {
  float: right;
  width: 300px;
  padding: 20px;
  border: 1px solid blue;
  margin-left: 10px;
}

div.warn {
  padding: 20px;
  border: 1px solid red;
  display: flow-root;
}

<div id="toc">
  <h2>Table of contents</h2>
  <ol>
    <li>Chapter 1</li>
    <li>Chapter 2</li>
    <li>Chapter 3</li>
  </ol>
</div>
<div id="main">
  <h1>Chapter 1</h1>
  <p>In the beginning ...</p>
  <div class="warn">
    Fairy tale, watch out!
  </div>
  <p>... and were married happily ever after.</p>
  <div class="warn">
    Don't retell!
  </div>
</div>