1

floatとの動作を理解しようとしていclearます。そのため、実験用に小さな例(jsfiddle で入手可能)を作成しました。

HTML:

<div class="left">A</div>
<div class="custom">B</div>
<div class="left">C</div>
<div class="left">D</div>​

CSS:

div {
    background-color: blue;
    color: red;
    width: 100px;
    height: 100px;
    margin: 3px;
}

.left {
    float: left;
}

.custom {
    float: none;
}​

まず、background-color: blue;B のディレクティブが失われたように見える理由がわかりません。

オリジナル

margin: 3px;第二に、ステートメントを削除すると次のようになる理由が明確ではありません。

余白が削除されました

あなたの助けやリンクを前もってありがとう。

4

1 に答える 1

4

B のディレクティブは失われていません。ディレクティブを囲む浮動要素がテキストを div の外に押し出しているだけです。フロートされた要素から背景色を取り除くと、少しはっきりと見えるようになります:

http://jsfiddle.net/faq9h/3/

(2 番目の画像のように) マージンを削除すると、実際に表示されるのは、B テキストの下に透けて見える C の背景です。

これを修正する簡単な方法はdisplay: inline-block、非フローティング要素に追加することです:

http://jsfiddle.net/faq9h/4/

その後、ボックスは ACD B として表示されます。

何が起こっているのかを理解することに関しては、これは優れた記事です。

于 2013-01-03T13:09:06.397 に答える