floatプロパティの挙動(初心者)

CSSのfloatプロパティの挙動について(初心者)。

floatは回り込み


インライン要素である「画像」は、
通常は、下図のように1つのライン上に乗る。

<p style="width:500px;">
文字文字文字<br>
文字<img src="画像.png">文字文字<br>
文字文字文字
</p>


floatプロパティをつけた画像は、
後続の文章が回り込む。


<p style="width:500px;">
<img src="画像.png" style="float:left;">
文字文字文字<br>
文字文字文字<br>
文字文字文字<br>
</p>

floatの下に潜り込む

float要素の後続の
ブロック要素はfloat要素の下に潜り込む。
インライン要素は、float要素を避ける。

float要素を緑色の半透明にして、後続に
黄色のインライン要素と、
赤のブロック要素を配置しました。

ブロック要素は、float要素の下に潜り込んでいます。
インライン要素は、下に潜り込まずに避けています。
コンテンツとなる文字部分は、
どちらもfloat要素の下に潜り込まずに避けています。

下はソースコードです。

<style type="text/css"><!--
body{font-size:2em;}

#aaa{width:200; height:200; opacity:0.4; background:green;}
#bbb{background:yellow;}
#ccc{background:red;width:500px;}
--></style>

<div id="aaa" style="float:left">float要素</div><br>
<span id="bbb">インライン要素</span>
<div id="ccc">ブロック要素</div>

floatの挙動

float要素の後続の要素について

ブロック要素は、自分もfloatにならない限り、
float要素を無視する。

インライン要素は、
ブロック要素に入っている、いないに関わらず、
float要素を避ける。

floatの親要素からはみ出る

float要素の親もブロック要素なら
float要素を無視する。

親要素のブロック要素に、
float要素を2つ並べました。
親要素は「親要素」という文字の高さ分だけ
認識してますが、
子要素の2つのfloat要素の高さを認識せず、
はみ出しています。

ソースコードはこちらです。
<style type="text/css"><!-- body{ font-size:2em;} #aaa{ background:lightgreen ; width:400px; /*※2*/} #bbb,#ccc{height:150px; width:100px; margin:10px 20px; float:right; } #bbb{ background:yellow; } #ccc{ background:red; } /*※3*/ --></style> <div id="aaa">親要素 <div id="bbb">float要素</div> <div id="ccc">float要素</div> <!--※1--> </div>

はみ出る問題の対処①

①float要素の下に「clear:both;」を付けたbox要素を置く。
先ほどのソースコードの※1のところに、
下記の一文を加えてみます。

<div style="clear:both; background:skyblue; margin:10px">
clear:both</div>


すると、
親要素がfloat要素の高さ分を確定して認識してくれます。


clearというプロパティを使います。
clearは、floatの回り込み効果を解除して、
仕切り直しする効果があります。
float要素の真下にclear:bothを指定した
ブロック要素を置きました。

これでほとんど解決するのですが、
下に余計なブロック要素を加える必要がない時は、
他の方法もあります。

はみ出る問題の対処②

②親要素に「overflow:hidden;」を設定する。
先ほどのソースコードの※2のところに、
下記の一文を加えてみます。

overflow:hidden;

すると、
親要素がfloat要素の高さを認識してくれます。


「overflow:hidden」というのは、
その要素が持つ領域を何らかの理由で中身がはみ出した場合、
はみ出し部分を非表示にするという効果があります。

「overflow:hidden」にした要素に、
サイズ指定がない場合、子要素で範囲を判断し、
親要素の領域を確定してしまいます。
子要素に「box-shadow」で影を付けたり、
画面解像度を超えたwidthを指定してはみ出しても、
「overflow:hidden」を指定すると、
親要素のサイズ指定がなくても、はみ出し部分が消えます。
子要素を使って親要素の領域を確定してしまうので、
無視されていたfloat要素のサイズも渋々親要素に認識されます。

はみ出る問題の対処③

③親要素の疑似要素内に「clear:both;」をつける。
先ほどのソースコードの※3のところに、
下記の一文を加えてみます。
#aaa:after{
content: "";
clear: both;
display: block;
}


すると、
親要素がfloat要素の高さを認識してくれます。


親要素に「疑似要素」というものを使います。
「疑似要素」は、その要素の末尾に
任意のインライン要素を付け加えるものです。
セレクタに「:after」を付けるだけです。
その後、プロパティに「content:"";」を加えます。
「""」内には、任意の文字を入れます。
例えば、「"new!"」と付けると、
その要素の末尾に「new!」と表示されます。
今回は空の要素でいいので「content」の中身は、
何も書きません。

この疑似要素を使って今回は、
その要素の末尾に空のブロック要素を付け加え、
さらに「clear:both」を指定することで、
疑似的に対処①と同じ状態を作り出しています。

対処①のように余計なボックス要素を付けずに済み、
対処②のように本来とは違うプロパティの使い方をせずに済むため、
こちらの方がスマートとされているようです。

clearfix

上記の「対処③」の方法を
「clearfix」というらしいです。
2004年5月8日にTony Aslettという人が考案したそうで、
「clearfix」には、Tony Aslettさんのオリジナル版や、
「micro clearfix」なるものがあるそうです。
いろんなサイトで詳しく書かれているので、
ググってみるといいと思います。
オリジナル版は、当時のNetscapeのブラウザでは、
content=""に何かを入れないと反映されない点や、
その文字を隠すための「height: 0;」を加える必要があるなど、
今より分量が多くなっています。