如何使浮动元素的边距折叠

问题描述

如何让这些浮动 div 的垂直边距折叠起来？

.container {
  display: block;
  padding: 1px;
  max-width: 500px;
}

.float-left {
  display: block;
  float: left;
  margin: 20px;
}

.float-right {
  display: block;
  float: right;
  margin: 20px;
}

.center {
  display: block;
  text-align: center;
  margin: 20px;
}

.container * {
  outline: 2px solid red;
  Box-shadow: 0px 0px 0px 20px rgba(0,0.5);
}

<div class="container">
  <div class="float-left">::::::::::::::::::::::FloatLeft::::::::::::::::::::::</div>
  <div class="float-right">::::::::::::::::::::::FloatRight::::::::::::::::::::::</div>
  <div class="center">::::::::::::::::::::::::::::Center::::::::::::::::::::::::::::</div>
</div>

最终结果：

注意 .float-left、.float-right 和 .center 的行为应该是一样的，当改变 .container 的宽度时，即使有没有浮动的解决方案。

谢谢。

解决方法

我想通了：

.container {
  display: block;
  padding: 10px;
  max-width: 500px;
}

.float-left {
  display: inline-block;
  float: left;
  margin: 10px;
}

.float-right {
  display: inline-block;
  float: right;
  margin: 10px;
}

.center {
  display: block;
  text-align: center;
}

.center_container {
  display: inline-block;
  margin: 10px;
}

body *:not(.center) {
  outline: 2px solid red;
  box-shadow: 0px 0px 0px 10px rgba(0,0.5);
}

body .container {
  box-shadow: inset 0px 0px 0px 10px rgba(0,0.5);
}

<div class="container">
  <div class="float-left">::::::::::::::::::::::FloatLeft::::::::::::::::::::::</div>
  <div class="float-right">::::::::::::::::::::::FloatRight::::::::::::::::::::::</div>
  <div class="center">
    <div class= "center_container">::::::::::::::::::::::::::::Center::::::::::::::::::::::::::::</div>
  </div>
</div>