CSSで奇妙な動作が発生する

何らかの理由で、フッタの境界線がページの上部にあり、テキストが下部にあります。誰がなぜこれをやっているのか教えてもらえますか？CSSで奇妙な動作が発生する

あなたがページhereを見ることができます：

私は赤い線がちょうど私のフッターの上にあることを期待します。私は何が欠けていますか？

2012-01-14 Paul

以下の回答で述べたように、あなただけ正しく山車を処理する必要があります。 [フッタ要素に 'clear：both'を追加すると問題が解決されます]（http://jsfiddle.net/9wnSN/）、@H Bellamyの答えを参照して浮動小数点の扱い方を理解することをお勧めします。 –

フロートは、このようなレイアウトの問題を引き起こす可能性があります。コンテンツコンテナでのみ使用しているので、float: left;を.search_summary_containerから削除し、display: inline-block;を追加することができます。

デモ：http://jsfiddle.net/ThinkingStiff/HSNNZ/

.search_summary_container { 
    height: auto; 
    width: 480px; 
    margin-top: 10px; 
    border: 1px solid #c1d1da; 
    display: inline-block; 
}

出典

2012-01-14 19:15:11 ThinkingStiff

それはそのトリックでした。ありがとう！ – Paul

明確追加：あなたのフッターの両方を：

<div style="padding-top:10px;border-top: solid 1px #ff0000; font-size:11px; clear:both;">...</div>

説明：あなたは左フロートとフロート権利を持っている場合は、その、後に来るコンテンツがあなたのフロートの下に移動します。したがって、クリアすることによって、浮動小数点数をリセットし、浮動小数点数をコンテンツの後にレンダリングします。

出典

2012-01-14 19:06:59 jValdron

お役立ち情報ありがとう、それはそれを修正した。 – Paul

フッターで、CSSをclear:bothに設定してください。

この記事を読む：http://css-tricks.com/all-about-floats/

出典

2012-01-14 19:09:22

CSSで奇妙な動作が発生する

答えて

関連する問題