clearfixの使い方

使い方としてはfloatを指定した要素の親要素にclearfixというclassをつけるだけです。
そうすると画像のようになります。
回り込んでいたテキスト02の文章がfloat要素の高さがでてテキスト02の文章の回り込みが改善されます。

以下のコードのようにCSSに.clearfix::after{ 〜 }を記述し、floatを指定した要素の親要素にclearfixというclassをつけます。

HTML
コピー
<div class="wrap01 clearfix"><!-- floatを指定した親要素にclearfixというclassをつける -->
   <div class="wrap01_box">float要素</div><!-- floatを指定した要素 -->
   <div class="wrap01_text">テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01</div>
</div>
 
<div class="wrap02_text">テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02</div>

CSS
コピー
/* clearfixを記述 */
.clearfix::after{
   content: "";
   clear: both;
   display: block;
}
/* clearfixを記述 */
 
.wrap01{
   margin-left: auto;
   margin-right: auto;
   margin-top: 50px;
   width: 50%;
}
 
.wrap01_box{
   float: left;
 
   background-color: #aaa;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: bold;
   margin-right: 20px;
   width: 300px;
   height: 300px;
}
 
.wrap01_text{
   font-size: 16px;
   line-height: 1.5;
   width: 100%;
}
 
.wrap02_text{
   font-size: 16px;
   line-height: 1.5;
   margin-left: auto;
   margin-right: auto;
   margin-top: 30px;
   width: 50%;
}

なんでclearfixがいいの？

個人的には汎用性があってコードもシンプルになって一番ラクなやり方かと思いますが、やはりメリット、デメリットがあるのでclearfixが使いづらく感じることもあると思うのでそんな時は他の方法で試してみてください。

それでclearfixの何がいいかというと、

• ・他の方法と比べてレイアウトに影響しない
• ・CSSが散らからない

というところです。

逆に使いにくい点としては、

• ・疑似要素の::afterを使ってしまう

くらいでしょうか。

overflow:auto;を使うメリット・デメリット

overflow:auto;を使う方法のいいところはというと、

• ・CSSを追加するだけで実装できる

というところです。

使いにくい点としては、

• ・他の人がコードを見たときになんのための記述かわかりにくい
• ・レイアウトによっては使いにくい場面がある

というところです。