HTML&CSS最近はflexboxという超便利なプロパティがあるので複雑なことにはだんだん利用されなくなってきそうなfloat。一度ちゃんと検証してみようかなということで今回はfloatとclearfixです。何?floatとは<div><p>のような要素を「右や左に寄せるプロパティ」といったイメージでしょうか?ブログで使われる2カラムや3カラムの構造なんかでもよく見かけますよね。通常div要素をそのまま記述すると縦に並びます。今回は3つのdivそれぞれにwigthとheightと背景色を指定したものを用意してみました。darksalmon;}これにfloatプロパティを付けてあげることで横並びにすることができます。floatの値と書き方floatには次の4つの値があります。親要素のfloatの値を引き継ぐinheritはほとんど使うことはありませんね。;ためしに先ほどのdiv要素を左に並べてみましょう。left;を付けてみました。きれいに左に寄りましたね。左から順番に1,2,3と並んでいます。これが基本的なfloatの使い方です。続いてfloatを一部だけに指定してみましょう。表示がおかしいことに気付きます。それではひとつずつ見ていきましょう。floatの指定が無かったのでfloatしない。Left2とLeft3は縦に並びます。されたために浮いた状態になった」という状況です。回り込んだ」とも言えます。Left1がノートでLeft2が下敷きのような状況を想像してもらえれば分かりやすいかもしれません。文字は表示できるところに回り込んでいますね。指定して試すとまた疑問点が出てくるのですが正直キリがないので今回は次に行きます。floatすると親要素の高さが無くなるなんのこっちゃですが先ほどの3つのdivを横並びに戻した状態でそれをぐるりと囲む親要素を付けてみましょう。class="left3">Left3</div></div>containerクラスが親要素、Left1~3が子要素になります。親要素にはwidthの指定と背景色を付けてボーダーも引いてみます。#25a;}さてさてどうなったでしょうか?おおっと!上の方にボーダーらしきものは見えますが全体を囲ってくれていません。これは実は「中身である子要素が全部floatで宙に浮いちゃってるから高さが存在しない(高さが0)ことになっちゃってるよ!」という状況です。「背景を指定したのに表示されない」なんて時はこれかもしれませんね。いうことで解決方法を検討してみます。200px;など具体的な数値を入れて指定すれば高さが発生するのでちゃんと背景が表示されました。中の子要素がいつも固定されているとも限りませんのであまり現実的ではないかもしれません。回り込む要素を入れる親要素の中に回り込む要素が入っていれば自動で高さが出ます。<p>吾輩は猫である。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。あとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p></div>一見ちゃんとしたように見えますが、次のように後続の要素にも影響が出るのがfloatであるのでした...!floatしたらclearで解除が必要container(親要素)に続く後続の要素を追加してみます。問題を分かりやすくするためにp要素の文章も削ってみます。<p>吾輩は猫である。どこで生れたか頓と見当がつかぬ。#f55;}結果はこうなりました。さきほどのp要素の文章を短くしてcontainerの高さを低い状態にしてしまうとnext-containerがfloatした要素の下に回り込んでしまっているのが分かります。floatを解除して要素が回り込むのをやめさせましょう。この回り込みを解除するのがclearプロパティ、そしてclearfixと呼ばれる手法です。clearの値と書き方clearプロパティの値は次のようになります。右寄せされた要素に対する解除clearプロパティの記述は次のようになります。;今まではこのclearを入れる要素が親要素にない場合に空の<div>などを用意したりしていましたが現在はclearfixという手法が一般的になっているのでそちらを利用します。clearfix親要素にclear用のクラスを指定して子要素のfloatを解除する手法です。モダンブラウザ用の記述はスッキリとシンプルになっています。both;}こちらを親要素に足します。Container</div>するとどうなったでしょうか。無事floatが解除され後続の要素がきれいに続きました。clearfixは色々と奥が深いようなのですが今回はこの程度にします。hidden;を付けるとclearfixのようにfloatの解除と同じ効果が出ます。これは少しでも親要素からはみ出すところはバッサリ切られ、box-shadowなどを使いたいときに表示してほしいところがやっぱり切られたりすることもありあまり好まれていないらしいです。clearfixはclearfixで親要素のafter要素を使ってしまうので気を付けないといけませんね。right;をごちゃまぜにしてみます。明らかにwidthをオーバーする感じで配置するとどうなるでしょうか。ここまでくるとなんとなく分かってくるような気がします。CodePen.はいカオスー。記述した順に並べようとする。widthが足りなくなったら下に落ちるがなるべく上に付く形で左右に寄せられるfloatされていないpは隙間に入ってるという感じでしょうか。こちらのLeft,Rightの要素を交互に入れ替えたりp要素を入れる位置を変えたりp要素にwidthを付けたりするとさらに色々と変化します。よろしければ試してみてください。いうことでfloatに関するあれこれでした。関連フォローするleaf関連記事counter-incrementプロパティを使ってリストに連番を付ける連番を付けたいときに使用するol要素。数字の部分を自由に装飾したい!というときのためのメモ。通常のolリス...記事を読むXAMPPでHTMLファイル内でPHPを使えるようにするすっかりご無沙汰しております。おかげさまで何件かお仕事をさせていただいたりと夏は忙しくしていました。ブログも忘れないうちに更新したい...記事を読む初めましてのご挨拶。フリーランスとしてのブログスタート。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。