Question

我玩花车，我注意到固定位置不会出现“漂浮塌陷虫”。这是example。

所以我有两个div：

<body
    <div class="static">
        <img>
        <p>text text text</p>
    </div>
    <div class="fixed">
        <img>
        <p>text text text</p>
    </div>
</body>

首先是静态位置，第二个是固定位置：

.fixed, .static{
    outline: 1px solid black;
    width: 150px;
}
.fixed{
    position: fixed;
    left: 200px;
    top: 200px;
}
img{
   float: right;
   background-color: green;
   width: 100px;
   height: 100px;
}

结果：

那么为什么第二个固定div不需要.clearfix之类的东西来修复浮动崩溃？

Answer 1

因为position: fixed;会创建Block formatting context。

也请尝试以下样式，这些样式在div中具有类似效果。

float
position absolute和fixed
display - inline-blocks，table，table-cells
overflow - hidden，auto

为什么浮动坍塌不会出现固定位置

1 个答案: