为什么内联块容器不'当只包含浮动项时是否折叠?[英] Why an inline-block container doesn't collapse when contains only floated items?

本文是小编为大家收集整理的关于为什么内联块容器不'当只包含浮动项时是否折叠?的处理方法,想解了为什么内联块容器不'当只包含浮动项时是否折叠?的问题怎么解决?为什么内联块容器不'当只包含浮动项时是否折叠?问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

在这个布局中,我将3个框放在一个行中,将float: left;应用于每个框. 这些盒子在其他两个容器中.通常,这些容器崩溃了,因为当内容仅由浮动物品制成时,就会发生这种情况. 不过,将两个容器的display属性更改为inline-block,避免崩溃.

为什么?

另外:我很清楚我们不应该使用float连续将元素放置,而现代而正确的方法是使用flexbox或grid,但我偶然发现了偶然地,很想知道为什么

.container {
  background: tomato;
  display: inline-block;
  text-align: center;
  width: 100%;
}

ul {
  background: yellow;
  display: inline-block;
  list-style-type: none;
  padding: 1.5rem;
}

.box {
  border: 3px solid black;
  float: left;
  height: 100px;
  width: 100px;
}

.box-1 {
  background: aquamarine; 
}
.box-2 {
  background: yellowgreen; 
}

.box-3 {
  background: pink; 
}
<div class="container">
  <ul>
  <li class="box box-1"></li> 
  <li class="box box-2"></li> 
  <li class="box box-3"></li> 
  </ul>
</div>

推荐答案

因为inline-block生成块格式上下文

浮子,绝对位置的元素,块容器(例如内联块,桌子和托管件),不是块框,以及带有"溢出"以外的"溢出"框可见的'(除非该值已传播到视口)为其内容建立新的块格式上下文. ref

您可以阅读 mdn > mdn :

格式上下文会影响布局,但通常,我们为定位和清除浮点而不是更改布局创建一个新的块格式上下文,因为建立新的块格式上下文的元素将:

:

  • 包含内部浮标.
  • 排除外部浮子.
  • 抑制保证金崩溃.

本文地址:https://www.itbaoku.cn/post/2383690.html