1

そのため、最後の段落が明らかにクリアされておらず、 and の真ん中に滑り込んでいるという問題がh1ありnavます。しかし、段落の前に clear:both プロパティを持つ div を配置すると、機能しているように見えます。

私のフィドルで我慢してください。

  • nettuts から学んだ画像置換テクニックを表すために紫色の背景を使用しました。
  • clearfix 部分は「group」という名前のクラスで、CSS は一番下にあります。
  • display:block;また、レイアウト ブレークからを削除した場合h1 > a、フォローアップの質問は、どの要素をフロートさせる必要があり、どこに clearfix を適用する必要があるかです。
4

2 に答える 2

1

表示されている問題は、クリア要素が間違った場所にあるために発生します。

CSS を検討してください。

h1 {
    margin: 0;
    float: left;
    background: red;
    text-indent: -9999px;
    border: 1px dashed cyan;
}
nav {
    height: 44px;
    margin: 0;
    float: right;
    background: black;
    border: 1px dashed cyan;
}
.group:after {
    content:"x";
    display:table;
    clear:both;
    background-color: cyan;
}

h1左にフロートnavし、右にフロートすると、pブロックにテキスト (フロートではありません) が表示されます。

前に指摘したようにルールをp追加しない限り、コンテンツは期待どおりに 2 つのフローティング要素をラップします。clear:bothp

clearing 要素は、要素の後navに DOM に表示する必要があります。

この例では、ブロックの子であるブロックの後に表示されるコンテンツを生成する に適用.groupします。navulnav

nav高さを に設定しauto、さまざまなブロックの端を表示するためにいくつかの境界線と色を追加すると、問題がより明白になります。

デモを参照してください: http://jsfiddle.net/audetwebdesign/9nGQy/

問題は次のように表示されます。

ここに画像の説明を入力

ブロックx内に表示されるクリア要素の生成されたコンテンツのスポットをマークするを追加しました。nav

于 2013-11-14T12:22:10.093 に答える
0

試す：

p{
   clear:both;
}

あなたが求めている結果に応じて、それはあなたのために働くはずです。

于 2013-11-14T11:45:23.030 に答える