clear fixを勉強しているのですが、何回やっても以下の場合作動しないのですが、何が原因なのでしょうか？
ご教授ください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{margin:0;
padding:0;
}
.sidemenu{
display: block;
float: left;}
.sidemenu2{
display: block;
float:right;
overflow: hidden;
height: 100%;
}
.sidemenu2:after {
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
</style>
</head>
<body>
<ul class="sidemenu">
<li><a href="#">HOME</a></li>
<li><a href="#"> 診療の流れ</a></li>
<li><a href="#"> 院内の紹介</a></li>
<li><a href="#"> 院長の紹介</a></li>
<li><a href="#"> アクセス</a></li>
<li><a href="#">Q&A</a></li>
</ul>
<ul class="sidemenu2">
<li><a href="#">aaaaa</a></li>
<li><a href="#"> bbbbb</a></li>
<li><a href="#"> ccccc</a></li>
<li><a href="#"> ddddd</a></li>
</ul>
<p>クリアフィックスが実行されずメニューの間に入り込んだままになっています？？？</p>
みんなの回答 4 件
clearfixじゃなくてulがどっちもfloatなんだからpにclearいるでしょ
sidemenu2 に clearfix の命令は不要です。
sidemenu と sidemenu2 をまとめて囲む親のボックス作って、それにclearfixかける。
<head>
<meta charset="utf-8" />
<style type="text/css">
*{margin:0;
padding:0;
}
.sidemenu{
display: block;
float: left;}
.sidemenu2{
display: block;
float:right;
overflow: hidden;
height: 100%;
}
div:after {
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
</style>
</head>
<body>
<div>
<ul class="sidemenu">
<li><a href="#">HOME</a></li>
<li><a href="#"> 診療の流れ</a></li>
<li><a href="#"> 院内の紹介</a></li>
<li><a href="#"> 院長の紹介</a></li>
<li><a href="#"> アクセス</a></li>
<li><a href="#">Q&A</a></li>
</ul>
<ul class="sidemenu2">
<li><a href="#">aaaaa</a></li>
<li><a href="#"> bbbbb</a></li>
<li><a href="#"> ccccc</a></li>
<li><a href="#"> ddddd</a></li>
</ul>
</div>
<p>クリアフィックスが実行されずメニューの間に入り込んだままになっています？？？</p>
------------
sidemenuとsidemenu2を囲む要素（今回だと新規に追加したdiv）に入れるのがポイントですね。
質問者です。お三方様回答ありがとうございます。ご指摘のようにやるとうまくいきました。理屈とか仕組みは理解できていませんが(^^ゞ。学習中ですので、難しいことはわからないので、なんとなく感覚で覚えていきたいと思います。勉強になり感謝です。
関連するトピックス