如何让与浮动元素共存的HTML元素边框收缩且不重叠？

要解决浮动元素与块级边框重叠，同时满足两个红色盒子的不同布局需求，可通过以下CSS调整实现：

核心思路 #

浮动元素仅会让文本内容自动绕开，但块级元素的边框、背景不会主动避让，因此需要手动控制第一个盒子的右侧空间，同时让第二个盒子脱离浮动影响。

修改后的CSS代码 #

div#toc {
  float: right;
  width: 300px;
  padding: 20px;
  border: 1px solid blue;
  /* 给浮动盒子左侧加间隙，优化文本与浮动盒的间距 */
  margin-left: 20px;
}

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

/* 第一个红色盒子：避让浮动元素，避免边框重叠 */
div.warn:first-of-type {
  /* 计算浮动盒子总宽度（宽+左右内边距+左右边框）+ 额外间隙 */
  margin-right: calc(300px + 20px*2 + 1px*2 + 20px);
}

/* 第二个红色盒子：清除浮动影响，占满父容器宽度 */
div.warn:last-of-type {
  clear: both;
  /* 可选：增加与上方内容的间距 */
  margin-top: 20px;
}

原理说明 #

• 第一个盒子：通过margin-right计算出浮动元素的总占用空间（300px宽度 + 40px左右内边距 + 2px左右边框），再加上额外的20px间隙，确保盒子右侧不会触及浮动元素，彻底避免边框重叠。
• 第二个盒子：clear: both属性会强制盒子移动到所有浮动元素的下方，此时它脱离了浮动流的影响，自然会占据父容器的100%宽度。

内容的提问来源于stack exchange，提问作者Johannes Ernst