浮動div和位於絕對位置div下的div會導致額外的餘量 - 爲什麼？

我設置了一個絕對定位div（標題）下的左浮動div（導航）。除了左浮動div我有另一個div（文章）的邊距比浮動div的寬度稍大（通常爲兩列布局）。導航和文章的頂端邊距爲4em（頁眉高度爲3em）導航div的定位帶有4em的額外邊距。我可以解決這個問題，但我的問題是：爲什麼要額外的保證金。如果我省略標題的絕對位置，它看起來像我期望的：標題 - 邊距 - 導航和文章在一行上。代碼：浮動div和位於絕對位置div下的div會導致額外的餘量 - 爲什麼？

* { 
 
    box-sizing: border-box; 
 
    } 
 

 
    body { /*schalte voreinstellung Browser aus */ 
 
    margin: 0px; 
 
    padding: 0px; 
 
    } 
 
    header { 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 0px; 
 
    height: 3em; 
 
    width: 100%; 
 
    padding: 10px; 
 
    border: 1px solid blue; 
 
    border-radius: 0.5em; 
 
    background-color: silver; 
 
    } 
 
    nav { 
 
     float: left; 
 
     width: 17em; /*breite relativ zum Buchstaben "m" in der aktuellen Schriftgroesse */ 
 
     border: 1px dashed red; /*Rand und padding jedoch in pixel */ 
 
     margin-top: 4em; 
 
     padding: 5px; 
 
    } 
 
    
 
    
 
    article { 
 
     margin: 4em 1em 0em 18em; /* top right bottom left */ 
 
     padding: 0px 10px; 
 
     border: 1px dashed red; 
 
     min-width: 15em; 
 
    }

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
 
<title>Layout</title> 
 
</head> 
 
    <body> 
 
    <header> 
 
     headline - position fixed w&uuml;rde sie fest halten 
 
    </header> 
 
    <nav> 
 
     <h2> Navigation </h2> 
 
     <ul> 
 
\t <li> hier die links </li> 
 
     </ul> 
 
    </nav> 
 

 
    <article> 
 
     <h1>CSS-basierte Layouts</h1> 
 
     <h2>2 Spalten</h2> 
 
     die ziemlich leer sind 
 
    </article> 
 

 
    </body> 
 
</html>

來源

2016-11-03 karo

當你絕對定位的頭，佈局的其他行爲就像頭從未有。

因此，如果不考慮標題，我們會查看三種主要佈局元素：正文，導航和文章。

現在發生的事情是，由於標題現在與佈局的其餘部分無關，因此該文章將成爲身體的第一個流動子項，因此其頂部邊距會與身體摺疊（請參閱Why does this CSS margin-top style not work? ）。這會導致身體被推下，並且物品的邊緣與身體齊平，使得它看起來好像文章根本沒有被調整過。

另一方面，導航欄是浮動的，因此不在流程中。浮動元素的邊距不會隨其祖先崩潰，因爲浮動元素不在流中。所以它的邊緣邊緣，而不是邊緣邊緣，就像物品一樣，與身體齊平。

當您停止放置標題時，它仍然是主體的第一個流動子項。該文章的頂部邊距現在與頁眉的底部邊緣摺疊，而不是正文的頂部邊距。由於標題實際上沒有任何邊距，並且導航欄和文章的上邊距相等，因此導致後兩個邊彼此對齊。

來源

2016-11-03 18:53:26 BoltClock

是的，謝謝，這是邏輯，但我不希望身體壓低時，身體下降，但否則保證金將被完全省略。設置溢出：正文的自動應該避免這種行爲（請參閱爲什麼此CSS頁邊距樣式不起作用的鏈接？），但它沒有。我忽略了另一個方面？ – karo

@karo：請參閱[溢出：隱藏在div和body上，不同的行爲]（http://stackoverflow.com/questions/15461967/overflow-hidden-on-div-and-body-different-behavior） – BoltClock

浮動div和位於絕對位置div下的div會導致額外的餘量 - 爲什麼？

回答

相關問題