4

私は 2 列のレイアウトを持っています。そのうちの 1 つは左にフローティングされ、もう 1 つはそうではありません。

<div id="left">
    LEFT
</div>

<div id="right">
    RIGHT
</div>

CSS は次のとおりです。

#left {
    float: left;
    width: 200px;
    background: yellow;
}

#right {
    margin-left: 200px;
    background: orange;
}

フローティングされていない要素には、right次のようなマークアップがあります。

    <div id="nav">
        <div class="item">LINK</div>
        <div class="item">LINK</div>
        <div class="item">LINK</div>
        <div class="item">LINK</div>
        <div class="item">LINK</div>

        <div class="clear"></div>
    </div>

    <h1>Welcome World</h1>

navandの CSS は次のとおりitemです (ご覧のとおり、itemはフローティングされています)。

#nav {
    background: blue;
}

.item {
    background: green;
    float: left;
    margin-right: 10px;
}

そして私のclear要素は次のとおりです。

.clear {
    clear: both;
}

そして、ついに、次の結果が得られました。

ここに画像の説明を入力

問題は、フロート要素もクリアclearしている要素にあると思います( )。しかし、私はこの結果を期待していました：#left

ここに画像の説明を入力

ここにフィドルのデモがあります

4

5 に答える 5

1

動作中のjsFiddleデモ

要素#navを次のように設定し、次のようinline-blockに設定widthし100%ます。

#nav {
    background: blue;
    display: inline-block;
    width: 100%;
}
于 2013-06-03T03:42:49.480 に答える
1

HTML に不要なマークアップを追加する代わりにoverflow: hidden;、#nav. これにより、フロート要素が通常のフロー#navから取り出されるため、 内のリスト項目の新しいブロック フォーマット コンテキストが作成されます(インフロー コンテナーはそれらの高さを尊重しません。<body>#left

Visual Formatting Model 9.4.1から:

フロート、絶対配置要素、ブロック ボックスではないブロック コンテナ (インライン ブロック、テーブル セル、テーブル キャプションなど)、および「可視」以外の「オーバーフロー」を持つブロック ボックス(その値が伝播された場合を除く)ビューポートに) コンテンツの新しいブロック フォーマット コンテキストを確立します。

#nav {
background: blue;
overflow: hidden; /* Creates a new block-formatting context
                     for floated descendants */
}

http://jsfiddle.net/bJFUj/9/

于 2013-06-03T03:42:57.763 に答える
0

私はこれを別の方法で行いました。クリアを 2 つの異なる場所のいずれかに移動できます (異なる結果が得られます) が、全体的な問題は解決されています。より適切な方を選択してください。

( http://jsfiddle.net/bJFUj/4/またはhttp://jsfiddle.net/bJFUj/6/ )

どちらの場合も、基本的に nav の css を変更します (そうしないと背景が表示されないため)

#nav {
    background: blue;
    overflow: hidden;
}

div#leftと の両方を含む要素に clear を移動するだけdiv#rightです。中div#rightに入れると の高さに関して面白い効果が出ているようですdiv#right。

于 2013-06-03T03:49:02.310 に答える
0

jsFiddle の例

#nav から削除されました

<div class="clear"></div>

#nav にスタイルを追加

overflow: hidden;
于 2013-06-03T03:49:29.967 に答える
0

フロートのクリアはフロート要素に関係していますが、左または右にフロートしていない要素をクリアしました#nav。したがって、あなたの意志に加えてfloat: left;、あなたが望むものとして機能するだけです。#nav<div class="clear"></div>

デモ

于 2013-06-03T04:04:18.107 に答える