div+css 標準のlayout_html/css_WEB-ITnose に関する一般的な問題と解決策

CSS2.0ボックスモデル階層平面図と3D図

3ピクセルの問題と解決策

floatコンテナを使用すると、IE6で3ピクセルのギャップが発生します 興味深いのは右側です。コンテナの高さを設定していない場合は、コンテナの右側に 3px が入ります。高さを設定すると、コンテナの左側に移動します。そのため、レイアウトの精度を要求される場合は、こちらを参照してください。実施例２９および３１の溶液に。

上のコンテナがフローティングすると、それに応じて下のコンテナもフローティングし、ページの混乱を引き起こします

たとえば、上記の例ではフッターは別の行を占有する必要がありますが、サイドバーがフローティングでコンテンツの高さがその高さよりも小さい場合サイドバーの右側にフッターも表示されるため、ページが混乱します。解決策は、メインコンテンツとフッターの間にコンテナを挿入し、スタイルを clear:both; height: 1px; line-height: 0px; でクリアすると、ページが通常になります。

子要素がフローティングで高さが不明な場合、親コンテナを子要素の高さに合わせるにはどうすればよいですか?

この場合、親ウィンドウに 2 つのスタイル属性 overflow:auto;zoom:1; を追加すると、親コンテナが内部コンテナの高さに適応できるようになります。 CSS HACK との互換性のために使用されます。 zoom:1; W3C の検証に通らないのが残念ですが、IE では