CSS -- 浮动带溢出

编程问答 2022-05-24

问题描述

为什么溢出属性会影响以下示例中元素的布局。

我听说发生这种情况是因为当我们使用可见以外的值指定溢出时，它会清除浮点数。我想知道我们是否可以使用 clear 属性（不使用溢出）重新创建行为。

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


<html>
<head>
<title>Page Title</title>
<style>
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;
}
</style>
</head>
<body>
  <section>Section 1</section>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）