CSS：浮动、溢出和阻止 .vs.内嵌块显示

如何解决CSS：浮动、溢出和阻止 .vs.内嵌块显示

为什么溢出属性会影响以下示例中元素的布局方式。我听说发生这种情况是因为当我们用一个不是可见的值指定溢出时，它会清除浮点数。我想知道我们是否可以使用 clear 属性（不使用溢出）重新创建行为。

我注意到的另一件事是：如果我没有为 side 指定溢出，而是将其显示更改为 inline-block，同样，它看起来会有所不同。 display: block 和 display: inline-block w.r.to 之前布局的浮动元素有什么区别？内联块也清除浮点数吗？谢谢。

section,aside,footer {
  border: 1px solid black;
}

section {
  width: 50%;
  height: 50px;
  float: left;
}

aside {
  width: 30%;
  height: 50px;
  display: block;
  overflow: hidden;
  /* comment this and see what happens */
}

footer {
  width: 10%;
  height: 50px;
}

<section>Section 1</section>
<aside>Aside</aside>
<footer>Footer</footer>