0

そのため、フロートがマージンを崩してしまう状況と、それがフロートの位置にどのように影響するかを理解するのに苦労しています。同じページに2つの異なる動作を示しているように見えるページを含めました。

赤いフロートは、それを介して崩壊したマージンの前に配置されているように見えますが、下にある青いフロートは、マージンが崩壊してから、それらのマージンが崩壊した後に配置されているようです。

どんな助けでも大歓迎です。

乾杯、ベン

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Inheritance Tests</title>
        <style>
        * { 
            margin: 0px ;
            padding: 0px ;

            font-family: courier ;
            font-size: small ;
        }

        .test4 {width: 200px; height: 100px; border-style: solid; border-width: 1px;}
        .test5 {border: 1px solid red; width: 200px; height: 50px; float: left; }

            .floatedRect {
                width: 50px ;
                height: 50px ;
                float: left ;
                background-color: #9cf ;
            }

            .text {
                margin: 10px ;
            }
        </style>
    </head>
    <body>
        <div class="test4">
            Normal Flow
        </div>

        <div class="test5">
            Floated
        </div>

        <div style="margin-top: 100px">
            Has a top margin
        </div>

        <div style="clear: both">
            <div class="floatedRect"></div>
            <div class="text">some text</div>
            <div class="floatedRect"></div>
            <div class="text">some text</div>
            <div class="floatedRect"></div>
            <div class="text">some text</div>
        </div>
    </body>
</html>
4

4 に答える 4

2

まず、コードを理解しやすくします。http://jsfiddle.net/gD9PL/

今あなたの答えは、フロートやマージンの崩壊のトピックとはまったく関係ありません。

実際、青い div が下向きになっているのは、それを含む div がテキスト div である行の 2 番目の div によって完全に下向きに押され、マージンが上にあるためです。

1px の境界線を配置すると、別の青い div が表示されます (div を含む 0px の境界線の場合とは異なり、プッシュされずにフローティングされます)。http://jsfiddle.net/gD9PL/1/

于 2012-02-17T16:13:44.017 に答える
1

たぶん、CSS 2.1 仕様の8.3.1 章のマージンの縮小が役に立ちますか?

于 2009-11-10T09:46:36.310 に答える
1

質問を完全に理解しているかどうかはわかりませんが、突き刺します：

フロートがマージンを崩す時があるとは思いません。私はあなたのコードを見てきましたが、ブラウザで表示すると「折りたたまれている」cssにマージンが設定されていません（私はSafariを使用しています）。

ここに私の考えがあります：

例の最初の部分では、フローティング div の前に通常のフロー div があります。フローティング div は、通常のフロー div の下にレンダリングされます。

例の 2 番目の部分では、通常のフロー div の上に floatedRect div があります。そのとき、テキストが右に移動します。これは、テキスト div のマージンに影響を与えたり、マージンを折りたたんだりしていません。floatedRect divの周りにテキストを「浮かせる」だけです。説明するためにコードを変更しました：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Inheritance Tests</title>
    <style>
    * { 
        margin: 0px ;
        padding: 0px ;

        font-family: courier ;
        font-size: small ;
    }

    .test4 {width: 400px; height: 100px; border-style: solid; border-width: 1px;}
    .test5 {border: 1px solid red; width: 200px; height: 50px; float: left; margin:10px; }

        .floatedRect {
            width: 50px ;
            height: 50px ;
            float: left ;
            background-color: #9cf ;
        }

        .text {
            margin: 10px; border:1px solid red; position:relative; z-index:1;
        }
    </style>
</head>
<body>


    <div class="test5">
            Floated
    </div>

     <div class="test4">
            Normal Flow
    </div>

    <div style="margin-top: 100px">
        Has a top margin
    </div>

    <div style="clear: both">
        <div class="floatedRect"></div>
        <div class="text">some text</div>
        <div class="floatedRect"></div>
        <div class="text">some text</div>
        <div class="floatedRect"></div>
        <div class="text">some text</div>
    </div>
</body>

テキスト div にはまだ 10 ピクセルのマージンがありますが、floatedRect div によってテキストが右に押し出されていることに注意してください。

それが役立つことを願っています。

于 2009-11-10T03:46:51.143 に答える
0

Andy Buddは、CSSと折りたたみマージンに関する記事を書きました。

http://andybudd.com/archives/2003/11/no_margin_for_error/

2003年の日付ですが、基本原則は引き続き適用されます。この記事は復習に役立つと思いました。

于 2011-01-05T21:17:31.960 に答える