层叠上下文的浮动

2024-02-19 02:51:55

深入理解层叠上下文

浮动元素对层叠上下文的精彩舞姿

层叠上下文就像舞台上的一个虚拟区域，元素在其中按照特定的顺序排列，展现出一场精妙的视觉盛宴。当浮动元素加入这场舞会时，一切都变得更加引人入胜！

常规浮动：翩翩起舞的优雅

想象一下一位优雅的舞者，与舞伴保持着一定的距离，却不影响其他人。这就是常规浮动元素的表演方式。它们只与同一层级中的元素互动，丝毫不会打扰父元素或其他层级。

<div class="container">
  <div class="float-left">左浮动</div>
  <div class="float-right">右浮动</div>
  <div>中间</div>
</div>

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

.float-right {
  float: right;
  width: 200px;
  height: 100px;
  background-color: green;
}

绝对浮动：特立独行的叛逆者

但并不是所有的浮动元素都这么规矩。绝对浮动元素就像舞台上的特立独行者，可以不受层级约束，与任何元素互动，甚至遮挡它们！

<div class="container">
  <div class="absolute-float">绝对浮动</div>
  <div>中间</div>
  <div>右侧</div>
</div>

.absolute-float {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 100px;
  background-color: red;
}

嵌套浮动：舞台上的同框演出

浮动元素之间也可以上演同台演出的精彩戏码。当一个浮动元素里又嵌套了另一个浮动元素时，就会产生嵌套浮动。嵌套元素也会浮动起来，形成一种错落有致的视觉效果。

<div class="container">
  <div class="float-left">
    <div class="nested">嵌套元素</div>
  </div>
  <div>中间</div>
  <div>右侧</div>
</div>

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

.nested {
  width: 100px;
  height: 50px;
  background-color: green;
}