overflow:hidden/浮动属性

Question

我真的无法理解为什么 overflow:hidden 使浮动属性效果被删除。

这是我很难理解的来源。

<div class="float-frame">
  <div class="float-unit">A</div>
  <div class="float-unit">B</div>
  <div class="float-unit">C</div>
  <div class="float-unit">D</div>
</div>    <!--html5 sources--!>

.float-frame {
  background: #eee;
  border: 1px solid #ddd;
  padding: 10px;
  overflow:hidden;}

.float-unit {
  width: 50px;
  background: #333;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
  float: left;        /* css3 sources */
  }

如你所见，overflow:hidden 属性的存在与属性不存在的情况完全不同

我了解到overflow:hidden 属性是为了让内容在溢出内容所属的框时不可见。

但为什么会这样？我的意思是 overflow:hidden 属性消除了浮动效果..

我已经搜索了很多文章..但我无法完全理解自己。

Answer 1

这是因为 overflow: hidden; 创建了一个新的 'block context'，参见 this Whosebug article on a similar issue。

我的建议是，如果您可以灵活地放置这些元素，请尝试删除 .float-unit 中的 float: left; 并将 display: flex; 添加到 .float-frame 中浮动样式并不意味着定位块元素。

overflow:hidden/浮动属性

overflow:hidden / float property

overflow

css-float