为什么浮动元素与下面的元素重叠而不是相反? [英] Why is the floated element overlapping the element below and not the other way round?

问题描述

div {
  background-color: #00FFFF;

}
p {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin: 0px;

}

#p1 {
  background-color: red;
float: left;


}
#p2 {
  background-color: green;
}
#p3 {
  background-color: orange;
}
#p4 {
  background-color: yellow;
}

span {
  position: relative;
}

#s1 {
 top: 1px;
 left: 1px;
}

#s2 {
  top: 2px;
 left: 2px;

}
#s3 {
  top: 3px;
 left: 3px;

}
#s4 {
  top: 4px;
 left: 4px;

}

<h1>Floating Elements</h1>

<div>
  <p id="p1"><span id="s1">A</span></p>
  <p id="p2"><span id="s2">B</span></p>
  <p id="p3"><span id="s3">C</span></p>
  <p id="p4"><span id="s4">D</span></p>
  <section>This is regular content continuing after the the paragraph boxes.</section>
</div>

推荐答案

为什么?

因为这是float的工作原理.

Because that is how float works.

在元素上放置float时，实际上并没有说元素本身应如何显示-而是以下内容如何/围绕它流动.

When you are putting float on an element, you are not actually saying much about how that element itself should displayed - but rather how/that the following content should flow around it.

更准确地说，以下 inline 内容.

To be more precise, the following inline content.

由于段落是块元素，并且它们的宽度和高度都固定为50px，所以得到的结果是-#p2段落的内嵌内容确实围绕#p1段落；但是父级段落的宽度和高度限制不允许该父级相应地增长.

Since your paragraphs are block elements, and you have also fixed their width and height to 50px, this is the result you get - the inline content of the #p2 paragraph does flow around the #p1 paragraph; but width and height restrictions of the parent paragraph don't allow that parent to grow accordingly.

如果您在理解我要说的内容时遇到麻烦，请考虑以下更简单的示例:

If you're having trouble understanding what I am trying to say, consider the following simpler example:

#floated {
  float:left;
  width: 50px;
  height: 50px;
  border:1px solid red;
}

#unfloated {
  border:1px solid blue;
  background: green;
}

<div id="floated"></div>

<div id="unfloated">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>

您可以轻松地看到，在没有浮动元素背景的情况下，第二个非浮动div元素在整个宽度上延伸，在"浮动元素下方，并且仅 其内联内容，Lorem Ipsum文本围绕浮动元素浮动.

As you can easily see, without a background for the floated element, the second, non-floated div element stretches across the whole width, "under" the floated element, and only its inline content, the Lorem Ipsum text, floats around the floated element.

那是float的工作原理.

That is how float works.

在您的示例中，您看到"B"出现在第二个正方形中-因为该B的父块元素的宽度和高度限制为50px，因此它不能增长为包含"B"，"B"文本只是按照其默认值overflow:visible的标准从其父元素尺寸中流出.

In your example, you see the "B" show up in the second square - because the parent block element of that B is limited to 50px in width and height, so it can not grow to encompass the "B", the "B" text simply flows out of its parent element dimensions as is standard with the default overflow:visible.

这篇关于为什么浮动元素与下面的元素重叠而不是相反?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！