Help us understand the problem. What is going on with this article?

clearfixの仕組み

More than 1 year has passed since last update.

clearfixは、
フローティングボックスが後続のボックスのレイアウトに影響を与えないようにするためのテクニック。

<header>header</header>
<div class="wrap">
  <article class="main">main</article>
  <aside class="side">side</aside>
</div>
<footer>footer</footer>

このHTMLに対して、
CSSで、mainにfloat:left;、sideにfloat:right;、wrapにwidthを設定するなどすると、footerが入り込む。


(補足(蛇足)。上のHTML内のタグについて。<article>は、それだけで内容が完結している部分で使用。
ページのメインコンテンツや、ブログの1つの記事などの「それだけで完結している部分(内容がまとまったもの)」で使用。(1ページに複数使用可。)<aside>は、メインコンテンツでない部分で使用。サイドバーに使ったり、広告の表示などに使う。)

そこで、下記のように記述する。

.wrap:after {
  display: block;
  clear: both;
  content: "";
}

こうすると、footerが入り込まない。

:afterで.wrapの後ろにcontent: "";とdisplay: block;による空のブロック要素が追加され、
clear:both;によって回り込みが解除されて、footerがフローティングボックス(mainとside)の下にくる。


補足。
clearは、floatで設定した回りこみを解除するもの。以下、設定値の種類。
・none(初期値)
回り込み解除をしない指定。
・left
左側の回り込みを解除する指定。
・right
右側の回りこみを解除する指定。
・both
左側、右側ともに回りこみを解除する指定。

clearfixの代わりにoverflowを使う方法もありますが、割愛します。

以上。

ShinichiIt0
趣味でプログラミングをちょこちょこやっています。 専門は建築のデザインです。 備忘録を投稿しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away