浮動元素上面的固定元素

我遇到了這個非常有趣的事情。用浮動和clearfix搞亂了。我有一個部分（容器），其中包含3個左浮動div盒，並避免容器崩潰，我使用clearfix方法。像前後那樣，清空內容，顯示塊並清除兩者。沒什麼特別的。現在，爲了瞭解這個clearfix如何在頂部和底部保留邊界，我在容器外部的頂部創建了一個div框。容器的頂邊和底邊都是50px，所以它的效果很好。但奇怪的是，當我試圖在容器外部漂浮一個橙色盒子時，盒子被容器內的孩子們容納在容器內。我覺得這很奇怪，因爲那個盒子不在容器的標籤內，它在外面。我知道浮動元素會從正常的文檔流中移除，因此容器的margin-top不能在div盒上繼續傳播，因爲它已從文檔流中移除，並且唯一依賴的元素是遺留下來的。但我的問題是：如果橙色盒子不是它的孩子，爲什麼橙色盒子被容納在棕色容器內？前：浮動元素上面的固定元素

浮動後：權利;應用到橙色盒子：

我的意思是橙色盒子可能已被轉移到其他地方奇怪，但不包含這麼好聽內部容器時，它不是容器甚至一個孩子，他們是兄弟姐妹。這裏發生了什麼？

代碼爲基礎的：

<body> 
<div id="box1"></div> 
<section class="clearfix"> 
<div class="one">One</div> 
<div class="two">Two</div> 
<div class="three">Three</div> 
</section> 
<div id="box"></div> 
</body> 

.clearfix:before, 
.clearfix:after { 
content: ""; 
display: block; 
clear: both; 
} 

#box { 
width: 300px; 
height: 100px; 
background: blue; 
} 

#box1 { 
width: 300px; 
height: 50px; 
background: orange; 
float: right; 
}

來源

2016-08-14 Limpuls

請添加css一等二三。 –

.one background：rgb（207,255,245）; float：left; } .two { background：rgb（101,209,255）; float：left; } .three { background：rgb（255,231,181）; float：left; } – Limpuls

至於你提到你正在使用浮動：正確的橙色框和它去其他分區裏面則是你還沒有使用浮動後使用clear:both。要記住，如果你在使用clearfix之前和之後部分將無法工作。你必須使用清除：在浮動div後面修復，否則會打破流動，並會導致問題，如你所看到的。

請參閱demo。浮動右div後，我簡單地使用clear:both，一切似乎都很好。爲了使它更簡單，嘗試清除每次使用浮動：向右或向左，你不會有任何問題。如果你在上次使用clear div之後還是使用ul li標籤，那麼你就完成了。希望這會幫助你。

來源

2016-08-16 07:47:51

這可以簡化爲'.clearfix {clear：both; }'不需要額外的標籤。 – Aziz

@Aziz我沒有使用額外的標籤，但歐普確實告訴他要說清楚。沒有其他的。 –

浮動元素上面的固定元素

回答

相關問題