为什么浮动崩溃不会出现在固定位置

我玩浮动物，我注意到“浮动崩溃错误”不会出现在固定位置。这里是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不需要像这样的东西0修复浮动崩溃？

来源

2015-08-16 mqklin

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

请尝试以下样式，它们在您的div中具有相似的效果。

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

来源

2015-08-16 09:05:01

如果你想让他们都出现在同一个你可以放在overflow-y:hidden;

https://jsfiddle.net/1nq8b7xs/3/

，或者如果你希望它们出现互相使用显示器的旁边：从您的固定类inline-block的和删除位置固定

https://jsfiddle.net/1nq8b7xs/4/

.fixed, .static{ 
 
    outline: 1px solid black; 
 
    width: 150px; 
 
    overflow-y:hidden; /*added this*/ 
 
} 
 
.fixed{ 
 
    left: 200px; 
 
    top: 200px; 
 
} 
 
img{ 
 
    float: right; 
 
    background-color: green; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.fixed, .static{display:inline-block;}

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

来源

2015-08-16 09:08:55

如果我想要固定div与fl出现怎么办燕麦崩溃，错误？ – mqklin

为什么浮动崩溃不会出现在固定位置

回答

相关问题