今回のCSS

この要素は右に寄ってください。

.testClass
{
  // 配置方法指定CSS
  float:none;   // 初期値
  float:left;
  float:right;
}

今回はfloatです。
要素を右または左に寄せて配置する時に使用します。
このCSSの特性としては
１：後続の要素はその反対側に回り込む。
２：いわゆる【浮いている状態】になるので、親要素が子要素の幅高さを認識しなくなる。
の２つがあげられます。
なんのこっちゃと思われますが、まずは詳細の値についてみていきます。

none

これは初期値となります。
配置方法も何もしないという形です。
floatを使用していないと同じ、です。

left

要素を左に寄せます。

right

要素を右に寄せます。

デモ

float:leftを使用した例

float:rightを使用した例

デベロッパーツールで確認いただけると分かるのですが
どちらもdiv要素に対して付与させることで、横並びになっていますね！
ちなみにfloatは横並びにする時、全ての要素に付与させるようにします。

おまけパターン：両端に分ける

おまけパターン：順番をひっくり返して両端に分ける

floatの落とし穴

上記、パッと見るだけでは、ただ単に横並びになっているだけなのですが、
ソースコード上では以下のようになっています。

<style>
<!--
#headListD
{
 width: 488px;
 border: 1px #000 solid;
}
#headListD li
{
 float: left;
 border: 1px #000 solid;
 text-align: center;
}
#headListD li a
{
 display: table-cell;
 width: 120px;
 height:50px;
 vertical-align: middle;
}
-->
</style>

<div style="background-color: #00FFFF" class="mb20">
 <ul id="headListD">
  <li>
   <a href="#">HOME</a>
  </li>
  <li>
   <a href="#">製品情報</a>
  </li>
  <li>
   <a href="#">企業情報</a>
  </li>
  <li>
   <a href="#">お問い合わせ</a>
  </li>
 </ul>
 <div id="contentsD">
  <p>ハーッハハー！</p>
 </div>
</div>

float;leftは、UL内のliにしか指定されていないのに
ulの次のdivまでもが横並びになってますね
おまけに親要素が子要素分伸びてない…

今日の最初のほうでお伝えしたfloatについての説明内の
【後続の要素はその反対側に回り込む。】
【いわゆる【浮いている状態】になるので、親要素が子要素の幅高さを認識しなくなる。】
まさにこれです。
floatを指定したので、後続のdivが影響を受けてしまっているんですね・・・南無三。

回り込みの解除

float使えないね。残念CSSじゃんか。

流石にこれだけのCSSは使い物になりません。
後続が回り込みをするならば、回り込みを解除すればよいだけの話です。
なので、そこさえきちんと対応してあげれば非常に使い勝手のよいモノとなります。

clearfix

今回の山場となります。
内容はややこしいけど知っていると知らないでは天地の差が出る
clearfix
の登場です。

clearfix？新しいCSSだね。何してくれるの？

clearfixですが、実はCSSではないのです。考え方の名前なのです。
提唱者が云々とかありますが、その辺はカットします。
さらに、clearfixって結構色々あって【コレ！】という統一したものが無い感じです。
と言うわけで、早速例を見てみようと思います。
昔からよく使われているパターンを例にします

.clearfix:after
{
 content:"";
 display:block;
 height:0;
 clear:both;
 visibility:hidden;
}

各々の説明をする前に少しだけ

上記CSSをコピって使えば動く。これが分かってればひとまずOKです。
大事な事なので2回言いますが、上記さえ覚えておいて、ベースとなる共通CSSにコピペしておけばそれでOKです
はい。本当にそうなのです。難しく考えて納得するのも重要ですが、まずは
【存在を知っている。】
【使い方を知っている。】
この２つが重要です。

:after

クラス名の後に、:afterとついています。
これは必須です。
必須だけど何？って事ですが、CSSにおいて、:(半角コロン)から始まる記述の事を
疑似要素、または、疑似クラスと呼びます。結構量があるのですが、この辺に関しては次回で説明します。
で、afterとは、の話に戻ります
中々理解が難しいかもしれないのですが、一般的に言われているものとしては

【:after擬似要素は、要素の直後に内容を挿入する際に使用します。】
要素の直後に内容を挿入？今回別に何も入れないでしょ？なのですが、:afterの説明に入ります。

:afterのデモ。その１

<style>
<!--
 #afterDiv:AFTER
 {
  content:"なんじゃぼけー";
 }
-->
</style>
<div id="afterDiv" class="mb20">
 うわああああやめてくれよおお
</div>

CSSで文字列を最後に追加していますね。
もう少し改造してみます。

:afterのデモ。その２

<style>
<!--
 #afterDiv2:AFTER
 {
  color: #FF0000;
 }
 #afterDiv2:AFTER
 {
  content:"なんじゃぼけー";
  color:#000;
 }
-->
</style>
<div id="afterDiv2" class="mb20">
 うわああああやめてくれよおお
</div>

さて、変化に気が付いたでしょうか。
id="afterDiv2"に対して、文字色:赤が設定されています。
しかし、after内で追加した文字は赤字にならず、黒になっています。
【after内で設定したCSSはafter内で追加したcontentのみに適用される】
これです。上記は重要点１です。
ちなみに、after内のcolor:#000;を消すと、#afterDiv2で指定されているcolor: #FF0000;が有効になります。
と言うことから、
【after内のCSSは他CSSよりも後に実行され、同一CSSの記述がある場合は上書きが行われる】
です。これは重要点２です。

再び:afterのお話に

と言うわけで、:afterのタイミングや内容について説明したところで、 .clearfix:afterはどういうことか？に戻りますと
【clearfixのクラスが付けられた要素で、一番最後に実行するCSSです】 となります。これが言いたかったんです。

clearfixの各プロパティ - content:"" -

contentですが、疑似クラスのafterにも出てきましたが、このプロパティは必須です。
Netscapeブラウザのバグに、「contentプロパティに何らかの文字が入っていないとボックスが生成されない」という問題があります。
なので、ネスケが使われていた時代は、"."として目立ちにくい文字のドットを付けようというお作法があったようですが
ネスケが既にお亡くなりになってしまった今では空として指定してあげるだけでよくなりました。
なので何も指定はいりません。
この時点で、要素の最後に空の何かが存在しています。

clearfixの各プロパティ - display:block; -

【after内で設定したCSSはafter内で追加したcontentのみに適用される】
という重要点がありました。
なので、contentで追加した空に対して、display:blockが適用されます。
で、これを指定することにより、ブロック要素となります。
なので、いわゆる【浮いていて、幅高さが認識されない】の問題を解決します。

clearfixの各プロパティ - height:0; -

これも、contentの時にお話したネスケバグの回避方法です。
height:0にして非表示にしようとしています。
現在はあっても無くてもOKです。

clearfixの各プロパティ - visibility:hidden; -

順番を変更してお送りします。
これも、contentの時にお話したネスケバグの回避方法です。
visibility:hidden;で、要素を非表示にしています。
display:none;とはまた別で、display:none;は【要素を無くしてしまう】
なので、意味合いが違うものになります。
この指定もあっても無くてもOKです。

clearfixの各プロパティ - clear:both; -

最後になりましたが、コレがないと回り込みの解除ができません。
これがあってこそのclearfixとなります。
floatとセットになっているCSSです。

.testClass
{
  // 配置方法指定CSS
  clear:none;   // 初期値
  clear:left;
  clear:right;
  clear:both;
}

none

回り込みの解除を行わない
初期値です。

left

float:left;が指定されている場合の回り込み解除用の値

right

float:right;が指定されている場合の回り込み解除用の値

both

右寄せ左寄せ関係なく、兎に角回り込みの解除をしたい時の値

わざわざleftとrightを分ける必要もないですし、基本bothだけ使って入ればOKです。

clearfixを付ける場所は？

clearfixを付与させる場所についてですが
こいつは、float系を指定した要素の親につけてあげてください。

お待たせしました。clearfix、使います。

では最初のほうの例に対してclearfixを指定してみます。

と、言うわけで無事に回り込みが解除され、思った通りに表示されました！

練習問題的な