絶対配置されたdivより下の浮動divとdivは余分な余白につながります - なぜですか？

絶対配置されたdiv（ヘッダー）の下に左浮動div（ナビゲーション）を設定しました。左の浮動小数点divのほかに、浮動小数点divの幅よりわずかに大きい余白を持つ別のdiv（記事）があります（2列レイアウトの場合は通常です）。ナビゲーションと記事の両方に4em（ヘッダーの高さが3em）の上限が得られますナビゲーションdivの余白は4emです。私はこれを解決することができますが、私の質問は、なぜ余分なマージンですか？ヘッダーの絶対的な位置を省略すると、header-margin-navigationとarticleが1行で表示されるように見えます。コード：あなたは絶対にヘッダを配置すると、ヘッダがなかったかのように絶対配置された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

、レイアウトの残りの部分は動作します。

ヘッダーを考慮せずに、本文、ナビゲーション、記事の3つの主要なレイアウト要素を検討しています。

ここで、ヘッダーはレイアウトの残りの部分とは無関係であるため、記事は本文の最初のインフロー子になり、その結果、上部余白が本文の畳み込みになります（Why does this CSS margin-top style not work? ）。これにより、ボディが押し下げられ、ボディの縁端がボディと同一平面になり、アーティクルがまったく調整されていないように見えます。

一方、navはフローティングであるため、フローから取り除かれます。フローティング要素のマージンは、フローティング要素がフローにないため、その祖先と崩壊しません。したがって、その縁辺エッジではなく、その縁辺エッジではなく、マージンエッジがボディと同一平面上にあります。

ヘッダーの配置を停止すると、ヘッダーは本体の最初のインフロー子のままです。記事の上部マージンは、本文の上部マージンではなく、ヘッダーの下部マージンと崩壊するようになりました。ヘッダーには実際に余白がなく、navとarticleの両方の上マージンが等しいので、後者の2つは互いに整列します。

出典

2016-11-03 18:53:26 BoltClock

はい、ありがとう、それは論理ですが、私はマージンが崩壊しているときにボディが押し下げられるとは思わないが、マージンが完全に省略される。ボディのオーバーフロー：autoを設定すると、この動作が回避されます（このCSSマージントップスタイルはなぜ機能しないのですか？のリンクを参照）。私は別の側面を見落としていますか？ – karo

@karo：参照[オーバーフロー：divとbodyのhidden、さまざまな動作]（http://stackoverflow.com/questions/15461967/overflow-hidden-on-div-and-body-different-behavior） – BoltClock

絶対配置されたdivより下の浮動divとdivは余分な余白につながります - なぜですか？

答えて

関連する問題