問題
Floatを解除するには、どうすればいい？
解決策
- 親要素の疑似要素「after」で「clear: both;」を使用する。
- 親要素に「overflow: hidden;」を使用する。
はじめに
floatとは、要素を回り込ませることの出来る機能のことで、clearfixとは、そのfloatを解除するテクニックのことを指します。このテクニックにおいて有名な方法を2つ、ご紹介します。
まず、マークアップを行います。
覆っている親要素にクラス「clearfix」を設定します。
今回は左側に要素を流し込みます。
<div class=“clearfix”>
<p class=“left-box”>float: left;<br>width: 150px;</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</div>次にcssを設定していきます。
① 親要素の疑似要素「after」で「clear: both;」を使用する。
クラス「clearfix」の疑似要素「after」に設定をしていきます。
まず「content」を空欄で設定し、「clear: both;」を設定します。
「after」はその要素の最後の子要素の最後として配置されます。そこでclearすることにより、この要素内でfloatが完結します。
しかし、もしこの要素内でさらにfloatを適用させている状態の場合、意図しない表示となってしまう場合があります。
.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
}
.left-box{
float: left;
width: 130px;
height: 130px;
padding: 10px;
margin-right: 10px;
background-color: #dddddd;
}② 親要素に「overflow: hidden;」を使用する。
クラス「clearfix」に「overflow: hidden;」を設定します。
「overflow: hidden;」により、この親要素で完結されるため、①の手法と同じ効果が得られます。
しかし、この手法のデメリットは、この親要素の外に子要素を出すことが出来ないため、position等の設定に制限が生じます。
.clearfix {
overflow: hidden;
}
.left-box{
float: left;
width: 130px;
height: 130px;
padding: 10px;
margin-right: 10px;
background-color: #dddddd;
}DEMOはこちら
①の手法の場合
float: left;
width: 150px;
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
②の手法の場合
float: left;
width: 150px;
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
コメント