More than 5 years have passed since last update.

floatとclearbothとclearfixのあぶない関係：bootstrapのときもさわりだけ説明

Last updated at 2016-10-19Posted at 2016-10-19

#CSSの基本
基本的にCSSは簡単です。
右に寄せて左によせて、おいてほいほい！

#基本的によく使うCSS

#floatとclear:bothの関係

Ａ
Ｂ
のコンテンツを横に並べたい！そんなときに、float:leftすると横に並びます。
が、基本的にfloatすると、Ｃの要素でclear:bothを行い、floatの終了をお知らせしなければなりません。

Ａ　Ｂ　Ｃ

<img src="gutetama.png" style="float:left;"><p style="float:left;">こんにちは</p><div style="clear:both;"></div>

こんにちは

上の場合、画像の横に文章が入ります。

しかし、この場合、
Ｃの要素の内部には、なにも書かれておらず、余計な<div>です。
これを解消するために開発されたのが、親要素でラッピングして、そいつにclear:bothをやってもらおうという考え方の
clearfixです。

#floatとclearfixの関係

Ａ
Ｂ
Ｃの要素でclear:bothを行うのではなく、親要素に:afterで擬似要素を生成し、そこでclear:bothを適用させ、clear:bothしか書かれていない空白のdivをなくすのが主流です。

Ｃ　
　Ａ　Ｂ　

<div class="clearfix">< src="dfafaoi.png" style="float:left"><p style="float:left">こんにちは</p></div>

上の場合、画像の横に文章が入ります。

clearfixのCSSは下記です。

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

同じように表示されます。

こんにちは

#bootstrapの場合

bootstrapのCSSでは、
float:leftは、.pull-left
float:rightは、.pull-right
clear:bothは、.clearfixで設定されています。

問題タイトル

2016-10-19

これで下記のような形になります。

問題タイトル

2016-10-19

ちなみに、.row にはclearfixが自動的に適応されます。
.rowで囲っていない要素に、.col-~~を設定して、結果高さがうまく認識されていないことがあります。
そんなときは、親要素に.clearfixをかけてあげましょう。

#positionの違いについて

- relative　親要素からの距離を測ります
- absolute　全体の要素からの距離を測ります
- fixed　その位置で固定になります

###ちょいと小技
ずっと、下にボタンをおいておきたい！
そんなときは何でしょう？

<section style="position:fixed;bottom:0;width:100%;background-color:white;"><button>ボタンだよ</button></section>