Clearfix
floatを解除するclearfixクラス。
floatを解除しない例
サンプル
sampleWrapper
sampleMain
sampleSide
ソースコード
<style>
#sampleWrapper {
padding: 10px 10%;
background-color: #FF00FF;
}
#sampleMain {
float: left;
width: 60%;
padding: 10px;
background-color: #00FFFF;
}
#sampleSide {
float: right;
width: 30%;
padding: 10px;
background-color: #FFFF00;
}
</style>
<div id="sampleWrapper">
<p>sampleWrapper</p>
<div id="sampleMain">sampleMain<br><br><br></div>
<div id="sampleSide">sampleSide<br><br><br></div>
</div>
解除用の要素を配置し、floatを解除する例
サンプル
sampleWrapper
sampleMain
sampleSide
ソースコード
<style>
#sampleWrapper {
padding: 10px 10%;
background-color: #FF00FF;
}
#sampleMain {
float: left;
width: 60%;
padding: 10px;
background-color: #00FFFF;
}
#sampleSide {
float: right;
width: 30%;
padding: 10px;
background-color: #FFFF00;
}
</style>
<div id="sampleWrapper">
<p>sampleWrapper</p>
<div id="sampleMain">sampleMain<br><br><br></div>
<div id="sampleSide">sampleSide<br><br><br></div>
<div style="clear: both;"></div>
</div>
clearfixクラスでfloatを解除する例
親要素のclass属性にclearfixを指定するだけ。解除用の要素をわざわざ配置しないで済む点がクール。
サンプル
sampleWrapper
sampleMain
sampleSide
ソースコード
HTML
<div id="sampleWrapper" class="clearfix">
<p>sampleWrapper</p>
<div id="sampleMain">sampleMain<br><br><br></div>
<div id="sampleSide">sampleSide<br><br><br></div>
</div>
CSS
<style>
#sampleWrapper {
padding: 10px 10%;
background-color: #FF00FF;
}
#sampleMain {
float: left;
width: 60%;
padding: 10px;
background-color: #00FFFF;
}
#sampleSide {
float: right;
width: 30%;
padding: 10px;
background-color: #FFFF00;
}
</style>