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

CSSの基本

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

基本的によく使うCSS

• text-align:　文字を中央にします
  • center
  • left
  • right
• color:
  • #000000
  • rgb(0,0,0)
• font-size:
  • px em rm
• width:　幅を決めます
  • px em rm
  • 0%～100%
• height:　高さを決めます
  • px em rm
  • 0%～100%
• position:　要素の関係性を決めます
  • relative　
  • absolute　
  • fixed　
• background-color
  • #000000
  • rgb(0,0,0)
• background-image
  • url('http://aiuoe/ofaifa.png')
• margin:　要素の外側の空白範囲を決めます
  • 10px 10px 10px 10px;
• padding:　要素の内側の空白範囲を決めます
  • 10px 10px 10px 10px;
• display:　ブロック要素かインライン要素か、はたまた消える要素か決めます
  • block
  • inline-block
  • inline
  • none
• z-index: レイヤーを決めます
  • 1~
• float:　ブロック要素の右寄せ左寄せを決めます
  • left
  • right
• clear:　要素の右寄せ左寄せの終わりに記載します
  • both

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で設定されています。

<article class="clearfix">
　　<div class="pull-left">問題タイトル</div>
　　<div class="pull-right">2016-10-19</div>
</article>

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

問題タイトル

2016-10-19

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

boostrapで参考になるサイト

http://bootstrap3.cyberlab.info/
http://techacademy.jp/magazine/6270

positionの違いについて

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

ちょいと小技

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

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