爲什麼浮動崩潰不會出現在固定位置

我玩浮動物，我注意到「浮動崩潰錯誤」不會出現在固定位置。這裏是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

爲什麼浮動崩潰不會出現在固定位置

回答

相關問題