CSS Float Overflow属性上的说明

Question

我是CSS的新手。我开始探索CSS Float属性。我在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中包含<p>元素内部的文本在.one Div下方合并。而且，由于两个都具有相同的宽度和高度，所以我看不到内容。

但是，当我将.two的溢出属性设置为滚动时，我会看到第二个DIV放置在第一个Div的附近。这令人困惑。为什么这样的行为？请向我解释。链接到下面附带的Codepen，以获取更多详细信息。链接到Codepen

Answer 1

float CSS属性指定应从正常流中获取元素。但是，非浮动元件仍然采用所有可用宽度，包括浮动元件。但是，如果将overflow: auto;或hidden设置为其，则将其对齐在浮动元素旁边。请参阅"演示"以下内容，它应该清楚地解释。

.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>

Answer 2

这里发生了什么是因为：

.container{
  overflow:hidden;
}

发生了什么事？您的浮动div希望在其他div之前占用空间。因为您的非浮动DIV具有显示：块，所以它希望一条线呈现自身。浮动div正在推下您的非浮动div，然后被上面的样式隐藏。如果将显示更改为Inline Block，它将仅使用宽度和高度属性所需的空间。

这是一个示例：http：//codepen.io/anon/pen/lvpxzy