スタイルシートのバグです(2)

質問

下記アドレスが現在テスト中のサイトのアドレスです。

バグの内容は添付画像の赤枠の部分なんですが
CSSの指定は見出しタグh3の下部にボーダーを設定してその中にテキスト要素を入れてフロートさせて右へ左へ配置しているのですが
なぜか見出しタグh3で設定したボーダーの部分にテキストが乗ってきてしまって打ち消し線みたいになってしまうのです。
ソースも無駄な部分は消して今の状態までスマートにして色々試行錯誤してみたのですがどうにも解決できません。
ちなみに一般的なブラウザー全てで同じ現象になるのでそもそも文法が間違っているのですかね？？
どなたかご教授いただけると助かります。
宜しくお願いします。

■HTML
http://sangoclip.web.fc2.com/lesson03/jyuken/
■デフォルトCSS
http://sangoclip.web.fc2.com/lesson03/shared/css/default.css
■リセットCSS
http://sangoclip.web.fc2.com/lesson03/shared/css/reset.css

回答No.1

salonpath · ベストアンサー

バグではなくcssの正しい挙動だと思います。

F-LeftとF-Rightがfloatしてるので、p-title03の高さがなくなってるだけです。
clearfixで検索するか以下を参考にcssを追加してみると期待した表示になると思います。
http://blog.d-spica.com/entry/070307clearfix.html

お礼

早々のご回答ありがとうございます。
どうやら私の記述ミスだったようです。
自分で「clearfix」を設定した時はダメだったんですが
今回再度設定してみましたら回避できました。
すいませんでしたこんな事でお手間取らせてしまって＞＜
ありがとうございました。

回答No.2

abril

> 一般的なブラウザー全てで同じ現象になるのでそもそも文法が間違っているのですかね？？

文法が間違っているわけではなく、floatプロパティの仕様を正しく理解していない為ですね。
親要素はfloatしている子要素の高さを認識しません（例によってIE6は間違った解釈の為、違う挙動を示すのですが）。
なので、この場合は<h3 class="p-title03">～</h3>は全ての子要素（<span class="F-Left">サブタイトル</span>と<span class="F-Right">一覧</span>）がfloatしている為、高さを0と解釈し、結果h3のボックスの描画はボーダーの分だけになって子要素がそこにぶらさがる形になります。

h3内のfloatしている子要素の後に何か要素が置けるのであれば、その要素にclear: both;を指定すればそこでfloatが解除されるのですが、本件の場合は適切な要素がありません。この様な時は、親要素h3にclearfixを使えば楽ですね。

h3.p-title03 {
（省略）
zoom: 100%;
}
h3.p-title03:after {
display: block;
height: 0;
visibility: hidden;
content: ".";
clear: both;
}

こういったfloatする子要素がある場合の描画については、以下などが図説入りでわかりやすいかと思います。
【参考】http://www.geocities.jp/multi_column/float/05.html
＃ここにも「フロートの親ボックスは高さ（height）の算出時に子のフロートを無視します。」と書いてあります。

お礼

早々のご回答ありがとうございます。
どうやら私の記述ミスだったようです。
自分で「clearfix」を設定した時はダメだったんですが
今回再度設定してみましたら回避できました。
すいませんでしたこんな事でお手間取らせてしまって＞＜
ありがとうございました。