CSS float overflow 属性的解释

Question

我是 CSS 的新手。我开始探索 CSS 浮动属性。我在 container 中有两个 <div> 元素。两个divs宽高相等

 <div class="container">
  <div class="one">
  </div>
  <div class="two">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
    </p>
  </div>
</div>

而上面的CSS是：

.one{
  width: 200px;
  height: 200px;
  background-color: green;
  border: 1px solid blue;
  float: left;
}
.two{
  width: 200px;
  height: 200px;
  background-color: red;
  border: 1px solid black;
  overflow:visible;
}

.container{
  overflow:hidden;
}

从上面我能理解的是，由于浮动的 div 从正常流程中删除并浮动到左侧，第二个 div 包含 [=17 中的文本=] 元素合并到 .one div 下面。而且由于两者具有相同的宽度和高度，所以我看不到内容。

但是当我将 .two 的溢出属性设置为滚动时，我看到第二个 div 与第一个 div 相邻放置。这令人困惑。为什么会有这样的行为？请解释一下。 Link 附在下面的 codepen 上以获取更多详细信息。 Link to Codepen

Answer 1

这里发生的事情是因为：

.container{
  overflow:hidden;
}

这是怎么回事？您的浮动 div 想要在另一个 div 之前占据 space。因为你的非浮动 div 有 display: 块，它需要整行来呈现自己。浮动 div 向下推非浮动 div ，然后被上面的样式隐藏。如果将显示更改为内联块，它将仅占用 space 使用宽度和高度属性所需的空间。

这是一个例子：http://codepen.io/anon/pen/LVpxZy

Answer 2

浮点数CSS 属性指定一个元素应该从正常流中取出。然而，非浮动元素仍然占据所有可用宽度，包括浮动元素。但是如果你给它设置 overflow: auto; 或 hidden，它就会紧挨着浮动元素对齐。看下面的demo，应该解释清楚了。

.a1, .b1 {
    background: rgba(0,0,0,.5); /*pure black with alpha*/
    width: 50px;
    height: 50px;
    float: left;
}
.a2 {
    background: lime;
}
.b2 {
    background: lime;
    overflow: auto; /*let the browser decide whether to clip or not*/
}

<div class="a1">hello</div>
<div class="a2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>

<br/>

<div class="b1">hello</div>
<div class="b2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>

CSS float overflow 属性的解释

Explanation on CSS float overflow property

css

css-float

CSS float overflow 属性 的解释

Explanation on CSS float overflow property

css

css-float

CSS float overflow 属性的解释