Question

我是CSS的新手。我开始探索CSS浮动属性。我在<div>中有两个container个元素。两个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从正常流中移除并浮动到左边，而包含<p>元素内的文本的第二个div合并在{{1}下面} div。此外，由于两者都有相同的宽度和高度，我无法看到内容。

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

Answer 1

这里发生的事情是因为：

.container{
  overflow:hidden;
}

发生了什么事？你的浮动div希望在你的另一个div之前占用空间。因为你的非浮动div有display：block，所以它需要一个整行来渲染自己。浮动div正在向下推动你的非浮动div，然后被上面的样式隐藏。如果将显示更改为内联块，则仅使用宽度和高度属性占用所需空间。

以下是一个示例：http://codepen.io/anon/pen/LVpxZy

Answer 2

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>

CSS float overflow属性

2 个答案: