CSSのclearfix、使いこなしてレイアウトを自由自在に!
CSSのclearfixとは?
floatは、要素を水平方向に配置するプロパティですが、float要素の子要素は親要素の高さに影響を与えません。そのため、親要素よりも高いfloat要素の子要素があると、親要素からはみ出してしまうことがあります。
clearfixは、この問題を解決するために使用されます。clearfixは、親要素にclearプロパティを設定することで、float要素の子要素が親要素からはみ出ないようにします。
clearプロパティ
clearプロパティは、要素の周りにどのfloat要素も表示されないようにするプロパティです。
clearプロパティには、以下の値を設定できます。
- none: デフォルト値です。要素の周りにfloat要素が表示されます。
- left: 要素の左側にfloat要素が表示されません。
clearfixには、いくつかの実装方法があります。
:after疑似要素を使用する
.clearfix::after {
content: "";
display: table;
clear: both;
}
この方法は、すべてのブラウザでサポートされています。
overflowプロパティを使用する
.clearfix {
overflow: auto;
}
zoomプロパティを使用する
.clearfix {
zoom: 1;
}
clearfixは、float要素の子要素が親要素からはみ出さないようにするCSSテクニックです。
clearfixには、いくつかの実装方法があります。どの方法を使用するかは、ブラウザのサポート状況やプロジェクトの要件によって異なります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clearfixサンプル</title>
<style>
.container {
width: 500px;
border: 1px solid #ccc;
padding: 10px;
}
.float-left {
float: left;
width: 200px;
margin-right: 10px;
border: 1px solid #ddd;
padding: 10px;
}
.float-right {
float: right;
width: 200px;
border: 1px solid #ddd;
padding: 10px;
}
/* clearfix */
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="float-left">
左側の要素
</div>
<div class="float-right">
右側の要素
</div>
</div>
</body>
</html>
解説
<div class="container clearfix">
<div class="float-left">
左側の要素
</div>
<div class="float-right">
右側の要素
</div>
</div>
container要素にclearfixクラスを適用することで、float-left要素とfloat-right要素がcontainer要素からはみ出ないようにしています。
実行結果
このサンプルコードを参考に、clearfixをプロジェクトで使用してみてください。
clearfixの実装方法
:after疑似要素を使用する
.clearfix::after {
content: "";
display: table;
clear: both;
}
overflowプロパティを使用する
.clearfix {
overflow: auto;
}
.clearfix {
zoom: 1;
}
flexboxを使用する
.container {
display: flex;
}
CSS Gridを使用する
.container {
display: grid;
}
各方法のメリットとデメリット
方法 | メリット | デメリット |
---|---|---|
:after疑似要素 | すべてのブラウザでサポートされている | コード量が少し多くなる |
overflowプロパティ | コード量が少なくシンプル | IE6以下で動作しない |
zoomプロパティ | IE6以下で動作する | 古いブラウザ特有の副作用がある |
flexbox | コード量が少なくシンプル | 古いブラウザで動作しない |
CSS Grid | コード量が少なくシンプル | 古いブラウザで動作しない |
新しいブラウザであれば、flexboxやCSS Gridを使用するのがおすすめです。
css clearfix