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

Posted 2023-03-24

【中文标题】如何使浮动元素的边距折叠

【英文标题】：How to make margins of floating elements collapse

【发布时间】：2021-09-22 17:18:25

【问题描述】：

如何让这些浮动 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,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 的宽度时，即使有没有浮动的解决方案。

谢谢。

【问题讨论】：

按垂直边距，你是否管理上下边距？

是的，当然。

我不清楚你想要发生什么。如果您不想要顶部或底部边距，只需将它们设置为 0。margin-top: 0px

@VincentRamdhanie 我已经添加了第二张图片，其中包含我想要发生的事情。

你为什么要用花车来做这个？

【参考方案1】：

我想通了：

.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,0,0.5);


body .container 
  box-shadow: inset 0px 0px 0px 10px rgba(0,0,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>