Question

＆＃13;

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;

}

＆＃13;

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

＆＃13;

Answer 1

来自MDN的Stacking and float

对于浮动块，堆叠顺序略有不同。浮动块放置在非定位块和定位块之间

进一步说

如果非定位块（示例中为#p2）的不透明度降低，则会发生奇怪的事情：该块的背景和边框在浮动块上方弹出，但仍位于定位块下方。

Answer 2

为什么会这样？

因为这就是浮点运算的方式。

当你将float放在一个元素上时，你实际上并没有多说这个元素本身应该如何显示 - 而是以下内容应该如何/周围流动它。

更准确地说，以下内嵌内容。

由于您的段落是块元素，并且您还将其宽度和高度修正为50px，这是您获得的结果 - #p2段的内联内容流动#p1段;但父段的宽度和高度限制不允许父级相应增长。

编辑：
如果您无法理解我想说的内容，请考虑以下更简单的示例：

#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文本浮在浮动元素周围。

那是浮点运算的方式。

在您的示例中，您看到“B”显示在第二个方块中 - 因为该B的父块元素的宽度和高度限制为50px，因此它不能增长到包含“B”，“B”文本只是流出其父元素维度，默认为overflow:visible。

Answer 3

您需要在浮动元素之后使用clear-fix，例如：

浮动元素后面的元素将围绕它流动。要避免这种情况，使用明确的财产。

CSS Layout - float and clear

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;

}

.clear { clear:both; }

<h1>Floating Elements</h1>

<div>
  <p id="p1"><span id="s1">A</span></p>
  <div class="clear"></div>
  <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>

Answer 4

失去漂浮物：左;在＃p1 {}上添加一个位置：relative;你的div {}和位置：绝对;顶部：0;左：0;到你的＃p2 {}。不知道你想要实现什么，但如果你宁愿保持浮动：左;在＃p1 {}而不是你需要清除：两者;在p {}。

为什么浮动元素与下面的元素重叠而不是相反？

4 个答案: