floatを使うときは幅を決めてねという話
さて、div「あ」のブロックと「い」と「う」とあって、
「あ」と「い」を横に並べて
その下に「う」を置きたい。
3つのdivはwrapというdivで包んである。
親よりも大きくなった時下に落ちること：
カラム落ちという。
.divにすると親のdivにもかかってしまう。
さてfloatすると浮いているので、あいたところに「う」が入り込もうとする。
実際Elementsで確認すると、「う」の領域は「あ」「い」にかぶっているのがわかる。
→
ここで面白いのは、webは勝手に情報を落としたりしないので、『領域はかぶって確保した』『ただし文字をその下のレイヤーに置いたら見えないし文字だけはかぶらないようにした』という挙動になる。
vwという単位もあるよ。ブラウザサイズの50％とかも指定できる。最近できた。
.left{
background-color : #F77;
float : left;
width : 50vw;
}
floatは浮いているので、親要素に対しても次の要素にも影響を与えてしまう。
そういうわけで、floatの影響を受けたくないところでクリアする必要がある。
.bottom{
background-color : #77F;
clear : both;/*もうfloat終わりにしてくださいよ*/
}
--->float.css
@charset="UTF-8";
.wrap{
background-color : #cc6;
width : 500px;
}
.left{
background-color : #F77;
float : left;
width : 200px;
}
.right{
background-color : #7F7;
/*float : right;*/
/*width : 50%;*/
/*rightでもいいんだけどbottomをclearのほうがよろしい*/
}
.bottom{
background-color : #77F;
clear : both;/*もうfloat終わりにしてくださいよ*/
}
さてさっきのnav.cssに戻るが、
li{
background-color: #CCC;
width : 100px;
float : right;
}
→liにclear.bothを入れる場所がない。
そのあと<main>とかがあったとして、そこに記述してもそこはよその家なのでうまくいかない。
どうするか
→1.親要素の<ul>におまじないをかける
ul{
background-color : #EEE;
overflow : hidden;
}
子要素の中でclear.both（クリア・ボス）るか、
親要素でoverflow : hidden;（オーバーフロー・ヒドゥン）にするかは
「floatしない要素が、子要素の最後にあるかどうか」にかかっている。
あればfloatしない子要素でクリアボス、なければ親要素でオーバーフローヒドゥン。
ちなみにfloat:right;を解除したいときは
clear:right;
とかもある。
bothは両方。
overflow : hidden;
基本的にWEBは情報を見せるもの。縦幅が指定してあっても文字数がオーバーしていたらその下にはみ出て表示されるのが普通。
それを敢えて、「はみだしたのは隠してください」というのがこの命令。
float専用の命令ではない。
2.clearfix
クリアフィックスというのを使う手もある。
これも裏技的な。
テキストを画像にまわりこみさせたいときは、このfloatを使うしかないのでがんばって使えるようにしよう。
