div+csS のテクニックとブラウザ互換のメソッド_html/css_WEB-ITnose

(1) フローティングレイヤーのあるレイヤーの場合、メインレイヤーは OVERFLOWER: HIDDEN を使用して、内側のレイヤーのフローティングによって引き起こされる他の外部効果を排除する必要があります。

例:

                  <p class="sycode">                 <     div id     =     "     main1     "     >           <     div id     =     "     son1     "      style     =     "     float：left; display:inline     "     >     aa     </     div     >          </     div     >          <     div id     =     "     main2     "      style     =     "     margin-top:10px;     "     >      main2内容　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　     </     div     >                  </p>

このとき、MIAN1 に OVERFLOWER: HIDDEN を追加しないと、MAIN2 の MARGIN-TOP は効果がありません。これは、浮動要素 SON1 の影響です。

display:inline は、二重の MARGIN 値を生成する IE6 の Floating MARGIN と互換性があります。もちろん、FLOATの影響を排除する他の方法は、浮動要素の後にDIVを追加してCLEARにすることです: LEFT、RIGHT、BOTH

(2) 浮動LIの場合、次のように配置したい場合複数の行と列の場合、LI は高さと幅を指す必要があります。高さを指定するのは、高さを指定しない場合、最前列のLIのテキストの行数が異なると、2行目のLIが沈んでしまうためです。