２カラムのページを作ろう　８　フッターの設定　floatの解除

今回のフッター部分作成で、スタイルの設定は、終了です。

フッターのスタイル設定

#footer{
  font-size : 80%;    
  color : #6d9493;
  text-align : center;
  border-top-width : 3px;
  border-top-style : solid;
  border-top-color : #506d6c;
  padding-top : 15px;
  padding-bottom : 30px;
  clear : both;
}

以上

フロートの解除

ここでのポイントは、表の最後にある項目。
「回り込みの解除・両方」【clear : both;】です。

フロートの解除には、左回り込み解除【clear : left; 】右回り込み解除 【clear : right;】がありますが、この両方解除の【clear : both;】の設定でＯＫです。

これで、ふらふらしている、フロートさんとは、おさらばです。

もう一つのポイント

クリアーしたボックス（ここでは、フッターのこと）では、上方向のマージンが効きません。

だ、だ、だれが決めたの！？

また、おまえか！！
ルールなんですぅ！！

どうすりゃいいのよ？

今回のように、パッディングで上の余白を設定するか、フロートさせたボックスの下方向にマージンを設定すれば、よいのです。
方法は、色々あるので、あれこれ試してみてね。

マージンさんには、マージンさんの事情があるのです。
今まで、色々苦労した管理人は、マージンさんとは、少し距離をおいてお付き合いをしています。

以上で、今回の２カラムのＣＳＳの設定は終了です。

次回は、ＨＴＭＬを書いて終わりだよ！

　なるほど！　と、思ったらクリックしてね！