CSS floatがページの拡大を防ぐ

これは非常に一般的なシナリオです。CSS floatがページの拡大を防ぐ

私は比較的新しい（CSSは意図されていません）、CSSの新機能で、浮動小数点整列に問題があります。私は2つのdivを持っています.1つは、メインコンテンツを浮動させるために、leftともう1つはナビゲーションのために浮かべてください。right。

とにかく、私はがにCSSフォーマットを適用しないとどうなりますか？これは望ましい動作です。期待通りにページがスクロールダウンします：
Desired behavior

ここで私は各要素にfloat: leftまたはfloat: rightを適用するときに何が起こるかです：
Undesired page overflow

彼らは両方のページ過去のオーバーフロー。私はそれが1つの画面領域に収まらない場合、それが下にスクロールするようにページを伸ばしたい。

私のHTMLのスニペット：

<body> 
<div id="wrapper"> 
    <div id="header"></div> 
    <div id="content"> 
    <div id="main"> 
     <p>Lorem ipsum [...snip...]</p> 
    </div> 
    <div id="secondary"> 
     <p>Lorem ipsum [...snip...]</p> 
    </div> 
</div> 
<div id="footer">&copy;</div> 
</div> 
</body>

と、対応するCSS：

#content { 
    padding:10px; 
    padding-top: 110px; 
    padding-bottom:60px; /* Height of the footer */ 
} 

#main { 
    padding: 10px; 
    float: left; 
    width:70%; 
    text-align:left; 
} 

#secondary { 
    padding: 10px; 
    float: right; 
    width:20%; 
}

は、なぜそれがこれをやっている、と私はそれをどのように修正することができますか？

出典

2011-01-11 Corey

フロートをクリアするとOKです。あなたの例によると例えば

：

<body> 
<div id="wrapper"> 
    <div id="header"></div> 
    <div id="content"> 
    <div id="main"> 
     <p>Lorem ipsum [...snip...]</p> 
    </div> 
    <div id="secondary"> 
     <p>Lorem ipsum [...snip...]</p> 
    </div> 

    <!-- clear --> 
    <div style="clear:both;"></div> 
</div> 
<div id="footer">&copy;</div> 
</div> 
</body>

がアップデート：古いIEブラウザのため、決済のdivはそれを「hasLayout」性を付与するために定義された高さが必要になることがありますか、そうでなければ、このdiv要素を無視します。 http://www.satzansatz.de/cssd/onhavinglayout.html

は一般的に、人々はあなたがここでしか<div class="clear"></div>

を入力する必要があるので、このすべての情報を持っているクラス定義をする代わりの方法があり

.clear { 
    clear: both; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
}

http://sonspring.com/journal/clearing-floatsから強固な決済CSSの例です作ります親divの浮動小数点数を取り除き、余分な構造的な<div>タグを削除していますが、この解決方法が間違っていれば、私が個人的に調べる必要はありません。

出典

2011-01-11 22:23:55

をしてくださいクリアに近いので

<br class="clear" />

を使用し助言する、、、このメソッドを使用しないでくださいしてください！不要なdivでマークアップを膨らませる理由はありません。 –

downvoteに感謝します。それぞれ自分自身に。私はオーバーフローが好きではありません：相対的な位置に問題を引き起こす可能性があるため隠されています。：after型の修正では、マークアップとブラウザ固有のより複雑な規則が必要です。 –

私は

を見ると、私は絶対に嫌なので、私は下降しました。それは乱雑なコードなので、それは今までにやってはいけません。常に別の解決策があります。 –

あなたはCSSを新しくしたと言ったように、浮動要素には高さがありません。したがって、#contentはデフォルトで、最小の高さになります。これは、パディングの合計高さです。

div#secondaryの後に<div style="clear:both;"></div>を追加すると、浮動要素の下に強制的に移動します。このdiv は、に高さがあるため、#mainが期待通りに動作します。サンプルコードについては、Yuji's answerを参照してください。

出典

2011-01-11 22:29:15

これは間違っています。浮動要素には高さがあります。関連する要因は、それらがフローの一部ではないということです。 – Jim

フローからフローティング要素が削除されるため、親要素の高さが計算され、その親要素がoverflow: visibleに設定されている場合、フロー要素は考慮されません。

float要素の下にダミー要素を配置するか（ダミー要素をclearプロパティで強制的に正しい場所に配置する）、または親要素をoverflow: visible以外に設定することができます。

出典

2011-01-11 22:36:11 Jim

ラッパーにすべての浮動要素が含まれるようにするには、単に設定します。

#wrapper {overflow: hidden;}

シンプルで完了です。余分なマークアップはありません。

出典

2011-01-11 22:48:00

任意浮動要素は、フローティング要素は、ブロック要素は、フローティング要素の後がない限り、その親要素の高さがゼロのままであろうまだコードの1000行を有することができ、コンテナDIVの高さを増加させるであろう..

少なくとも上の持っているすべての本部に=「clrfx」クラスを割り当てる、親指の

.clrfx:after { 
    clear: both; 
    display: block; 
    content: ""; 
}

ルールです：私は少し

<body> 
<div id="wrapper" class="clrfx"> 
    <div id="header"></div> 
    <div id="content"> 
    <div id="main" class="clrfx"> 
     <p>Lorem ipsum [...snip...]</p> 
    </div> 
    <div id="secondary" class="clrfx"> 
     <p>Lorem ipsum [...snip...]</p> 
    </div> 
</div> 
<div id="footer">&copy;</div> 
</div> 
</body>

CSSはあなたのコードを修正しましたe浮動小数点要素です。 <div class="clear"></div>を使用する人もいますが、マークアップではなくスタイリングの一部であるため、これを使用しないでください。あなたがこれを使用する必要がある場合は、最悪の場合には

はその後、私は改行が

出典

2011-01-18 06:39:10 Tarun

CSS floatがページの拡大を防ぐ

答えて

関連する問題