为什么文本环绕浮动元素而不是像另一个div那样向下滚动? [英] Why is text wrapping around a floating element instead of going belows like another div?

问题描述

我想更深入地了解CSS，我注意到当div浮动时，其他元素也会移到它下面.环绕它的文本不是这种情况.怎么会来?

I'm trying to understand CSS a bit deeper and I noticed that when a div is floating other elements go beneath it. That is not the case for text that wraps arount it. How come ?

推荐答案

这是设计使然，因为它是float的工作方式.如果您参考文档:

This is by design as this is how float works. If you refer to the documentation:

float CSS属性在容器的左侧或右侧放置一个元素，从而允许 text和inline元素将其环绕.该元素已从页面的常规流中除去 ，尽管仍然保留了一部分流.

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.

您应注意float元素的2个功能:

You should note 2 features of float elements:

• 已从正常流程中删除:这意味着其他元素可以与浮动元素重叠或与浮动元素重叠(例如与position:absolute一样)
• text和inline元素将环绕:仅text和inline level元素不会是重叠的浮动元素，而是将其环绕.

• Removed from normal flow: Which means that others elements can overlap floating element or be overlaped by floating element (like with position:absolute)
• text and inline elements will wrap around: Only text and inline level elements will not be overlap floating element but will wrap around it.

以下是一些基本示例，您可以更好地理解它们:

Here is some basic examples to better understand:

.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  background: blue;
}

<div class="float"></div>
<div class="blue"></div>

蓝色div与float元素重叠，因为它是一个块级元素.

The blue div is overlaped by the float element because it's a block level element.

如果我们将其设置为内联级别元素(inline-block)

It won't be the case if we make it an inline level element (inline-block)

.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  background: blue;
  display:inline-block;
}

<div class="float"></div>
<div class="blue"></div>

当我们添加文本时，您会注意到文本将如何环绕float元素，并将如何保留在其包含块(蓝色div)中.

When we add text you will notice how the text will wrap around the float element and will be kept inside it's containing block (the blue div).

.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  color:#fff;
  background: blue;
}

<div class="float"></div>
<div class="blue">  some text here some text here some text here some text here some text here some text here some text here some text here</div>

如果我们有更多的蓝色div，也会发生同样的情况:

The same happen if we have more of the blue divs:

.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
  opacity:0.5;
}

.blue {
  width: 200px;
  color:#fff;
  background: blue;
  margin:5px;
}

<div class="float"></div>
<div class="blue">  some text here some text here s</div>

<div class="blue">  some text here some text here some</div>

为了简单起见:float元素将与它周围的所有block元素重叠，而inline元素将在其周围环绕.

To make it easy: a float element will overlap all the block element around it and inline element will wrap around it.

这篇关于为什么文本环绕浮动元素而不是像另一个div那样向下滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！