隐藏的溢出导致div位于浮动div之下，而不是其后

如何解决隐藏的溢出导致div位于浮动div之下，而不是其后

目前，我处于这种情况，两个div彼此相邻（在一个容器div下），一个漂浮在左边，另一个占据其父对象的100％。

我还希望隐藏滚动条，但内容仍会被裁剪（可通过overflow: hidden来实现）。但是，当我使用overflow: hidden时，浮动格式发生了变化，并且div进入了浮动格式的下面。

这是带有或不隐藏滚动条的层次结构的片段：

.d1{
    background: red;
    height: 100%;
    width: 20px;
    position: relative;     
    transition: width 0.5s;
    float: left;
}

.cont{
    height: 50px;
    width: 100px;
    background: yellow;
}

.d2{
    background: blue;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.d3{
    background: blue;
    height: 100%;
    width: 100%;
}

<h1>Without overflow:</h1>
<div class="cont">
  <div class="d1"></div>
  <div class="d3"></div>
</div>

<h1>With overflow:</h1>
<div class="cont">
  <div class="d1"></div>
  <div class="d2"></div>
</div>

我想同时满足这两个约束（在上一个div后面浮动，并以100％占用父ANF隐藏滚动条，但保持剪切状态）。

使用position: absolute或css grid可以达到预期的效果，但是我想避免这些解决方案。

谢谢。

解决方法

使用overflow:hidden代替clip-path:inset(0)。两者都应通过剪切溢出的内容来产生相同的结果

.d1 {
  background: red;
  height: 100%;
  width: 20px;
  position: relative;
  z-index:1;
  transition: width 0.5s;
  float: left;
}

.cont {
  height: 50px;
  width: 100px;
  background: yellow;
}

.d2 {
  background: blue;
  clip-path:inset(0);
  height: 100%;
  width: 100%;
}

<h1>With overflow:</h1>
<div class="cont">
  <div class="d1"></div>
  <div class="d2"></div>
</div>

,

我想解释一下为什么隐藏溢出的问题。

无 overflow: hidden

d1和d3重叠，因为d1设置为float: left。

为什么d1在d3前面？这是因为d1设置为position：relative和float，这使其堆积顺序更大。

使用 overflow: hidden

使用具有不同于visible（默认值）的值的overflow属性将创建一个新的块格式化上下文，并且它不会与float元素重叠，而是会跟随前一个元素。

例如将d2的宽度设置为小于80px（100-20），将使d2符合d1

.d1 {
  background: red;
  height: 100%;
  width: 20px;
  position: relative;
  transition: width 0.5s;
  float: left;
}

.cont {
  height: 50px;
  width: 100px;
  background: yellow;
}

.d2 {
  background: blue;
  overflow: hidden;
  height: 100%;
  width: 80px;
}

<h1>With overflow:</h1>
<div class="cont">
  <div class="d1"></div>
  <div class="d2"></div>
</div>