CSS float溢出属性说明

问题描述

我是CSS的新手。我开始探索CSS float属性。我在容器内有两个< div> 元素。两个 divs 具有相同的宽度和高度。

I am a newbie to CSS. I started exploring CSS float property. I have two <div> elements inside a container. The two divs have equal width and height.

 <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包含在元素内的文本。第二个div在之下合并。 c $ c> div。此外，由于两者的宽度和高度相同，因此无法看到内容。

From the above what I can understand is that since the div that is floated is removed from the normal flow and floated to left and the second div which contains the text inside <p> elements merges underneath the .one div. And moreover since both have the same width and height I cannot see the content.

但是当我设置 .two 的溢出属性滚动时，我看到第二个div放置在与第一分区这很混乱。为什么会这样呢？请给我解释一下。链接到下面附带的codepen以获取更多详细信息。


But when I set the overflow property of the .two to scroll I see the second div being placed adjacent to first div. This is confusing. Why is such a behavior? Please explain me. Link to codepen attached below for more details.Link to Codepen

推荐答案

float CSS属性指定应从常规流中获取元素。但是，非浮动元素仍然占据所有可用宽度，包括浮动元素。但是，如果您将 overflow：auto; 或 hidden 设置为它，则它将在浮动元素旁边对齐。

The float CSS property specifies that an element should be taken from the normal flow. However the non-float element still takes all the available width including the floating element. But if you set overflow: auto; or hidden to it, it will then align next to the floating element. See the demo following, it should explain it clearly.

.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溢出属性说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！