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を使うしかないのでがんばって使えるようにしよう
