divは浮動小数点の寸法をとるのはなぜですか？

div#footerは、div#navigation{float:right}の領域しか認識しない理由はわかりません。divは浮動小数点の寸法をとるのはなぜですか？

float要素は通常のフローから取り出されるため、div#footerはfloat:rightとfloat:leftの両方の要素を無視する必要があります。

私はdiv#footerにclear:bothを追加しようとしていないのです。私はちょうどそれが起こった方法が不思議です。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #ccc; 
 
} 
 
#container { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 
#header { 
 
    padding: 30px; 
 
    background: #bbb; 
 
} 
 
#content { 
 
    float: left; 
 
    width: 460px; 
 
    background: #fff; 
 
} 
 
#navigation { 
 
    float: right; 
 
    width: 140px; 
 
    height: 200px; 
 
    background: #eee; 
 
} 
 
#footer { 
 
    background: #aaa; 
 
    padding: 10px; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html lang="en"> 
 
    <head> 
 
     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 
     <title>CSS Floats 101</title> 
 

 
    </head> 
 
    <body> 
 
     <div id="container"> 
 
      <div id="header"> 
 
       <h1>Header</h1> 
 
      </div> 
 
      <div id="content"> 
 
       <p> 
 
        Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. 
 
       </p> 
 
      </div> 
 
      <div id="navigation"> 
 
       navigation 
 
      </div> 
 
      <div id="footer"> 
 
       Footer 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

私はdiv#footerだけdiv#navigation{float:right}で撮影した空間を認識する理由を理解しません。

float要素は通常のフローから取り出されるため、div#footerはfloat:rightとfloat:leftの両方の要素を無視する必要があります。

出典

2016-05-28 J.Joe

'clear：both'を使ってフロートをクリアする必要があります。 – Harry

@ハリー私は明確に追加しようとしていません：div＃footerの両方に。私はちょうどそれが起こった方法が不思議です。 –

は、このCSSのトリックの記事をチェック - の要素を浮かべている別の要素の隣のスペースに水平方向に収まることができる場合https://css-tricks.com/almanac/properties/c/clear/ – Harry

要素が浮上している場合、それらは文書の通常の流れから除去されます。これを完全に理解するには、要素が通常のフローに配置されていることを考える必要があることを意味します。次に、floatプロパティを使用して要素を削除することを検討できます。

要素が両方ともフローティングされているため、通常のドキュメントフローから削除されます。#navigationおよび要素はフローティングされているため、通常のドキュメントフローから削除されます。これにより、#footer要素が#container要素の先頭に移動します。それは効果的に2つの浮動要素の下に効果的に配置されます。

それでも「フッター」のテキストを見ている理由は、すべて未クリアテキストが周りの要素を（floatがマガジンに周りのように埋め込まれた画像を、記事のテキストをラップするために使用されるように設計された、覚えて浮いラップということです記事）。この場合、テキストのコンテナの全幅は浮動要素で左右に塗りつぶされるので、テキストは新しい行にプッシュされます。

それはあなたの例から直感するのは難しいので、この1で見てみましょう：あなたが見ることができるように

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #ccc; 
 
} 
 
#container { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 
#header { 
 
    padding: 30px; 
 
    background: #bbb; 
 
} 
 
#content { 
 
    float: left; 
 
    width: 460px; 
 
    height: 190px; 
 
    background: #fff; 
 
} 
 
#navigation { 
 
    float: right; 
 
    width: 140px; 
 
    height: 220px; 
 
    background: #eee; 
 
} 
 
#footer { 
 
    background: #aaa; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html lang="en"> 
 
    <head> 
 
     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 
     <title>CSS Floats 101</title> 
 

 
    </head> 
 
    <body> 
 
     <div id="container"> 
 
      <div id="header"> 
 
       <h1>Header</h1> 
 
      </div> 
 
      <div id="content"> 
 
       Content 
 
      </div> 
 
      <div id="navigation"> 
 
       navigation 
 
      </div> 
 
      <div id="footer"> 
 
       Curabitur feugiat feugiat purus. Aenean eu metus. Nulla facilisi. Veni quis justo vel massa suscipit sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut tincidunt metus arcu vel lorem. 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

、テキストはまだ#navigation要素の下部を包みます、あまりにも。

出典

2016-05-30 16:23:50 TylerH

-1

浮遊物を避けたい場合は、インラインブロックを行ってください。ブラウザで空白を取るので、HTMLの空白を避けるようにしてください。親要素に0を、それが子要素のために必要なフォントサイズを与える：

また、フォントサイズを使用します。

出典

2016-06-06 06:48:17

divは浮動小数点の寸法をとるのはなぜですか？

答えて

関連する問題