[CSS]floatの指定が有る要素の親要素に高さを持たせる方法

Follow @mycb750

divにfloatを効かせた場合の親要素に与える影響について対処法をメモ

親要素divとその小要素divがある関係性の時に、小要素divにfloatを付けると親要素divの高さが0になる（下図）
※下図の場合は行間、margin、paddingの影響で多少の高さがでている状態。

この場合、mainに対して背景色などの設定をした場合にdivの高さがないため、範囲全体に適用されない。

この事象に対する2つの改善方法を記載する

対処法1.clear: both;を新たに作成するコンテントに設定

スタンダードな改善方法。
mainにコンテントを作成しclearfixとしてclear: both;を適用させることでflortをクリア（回り込み解除）する
clear: both;を適用する事でクリアされmainが全体を括るサイズとなる。
まずclear: both;を適用させる要素がないためmainの最後に要素を作る。その要素に対してclear: both;を適用することで改善される。画鋲で下を止めるようなイメージ。下図がイメージとなる。

この図をcssで適用するコードは下記のようになる

<div id="main" class="clearfix">

.clearfix:after {
	visibility: hidden;
	display: block;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.clearfix:afterは要素の最後に挿入するセレクタとなる。content: ” “;で空文字のコンテントを用意し、display: block;でブロック要素、height: 0;は高さ0で見えないようにしている。visibility: hidden;もコンテンツを見えないようにダブル指定をしているが、この2つの組み合わせは慣例として記載することが望ましい。（ブラウザ対応になっているのかも？）そしてこのコンテンツにclear: both;を適用させる事でflortをクリアしている。

* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
についてはIEのブラウザ対応のハックとして入れることが慣例となっている。

対処法2.overflow:hidden;を親divに設定

http://www.fsfield.info/develop/css/004/

メリットは参考サイトに記載してある通り
「overflow:hidden;によるfloat解除のメリットは、cssの指定が長くならない点と、DreamWeaverのデザインビューでもfloatが解除される点です。」

こちらの場合は親要素mainのdivに対して適用する事でfloatを解除することができる。
overflowプロパティでvisible以外を指定することで新しいブロックの書式コンテキストを確立することできる。

<div id="main" class="clearfix">

.clearfix {
    overflow:hidden;
    height:100%;
}

こちらの対応のほうが対処法1よりもメリットが多いためこちらを採用する事も良いが、親要素divからはみ出した位置に配置したdivなどの表示が切れてしまう場合があるので、そういった場合は対処法1を採用する事が良いと言える。
参考:http://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=2958&rand=541d6

本来のoverflowプロパティの仕様から考えるとfloat解除で使用するこの
方法は少しトリッキーに感じる

overflowプロパティ
http://www.htmq.com/style/overflow.shtml

上記以外の対処法

親要素mainのdivにheightをpx指定する事で改善される。パーセント指定の場合は改善されない。
ただ中身のコンテンツの表示が環境により上下するため、決めうちのサイズを指定する事はよくないため、改善方法としては使わない方が良い

その他おすすめの備忘録

• [git]gitでmarge又はpullでコンフリクトした場合の対処法 / All conflicts fixed but you are still merging
• jQueryの知っておいた方が良いセレクタ（どれに）について
• [Vim]:grepの使い方（quickfixリストの移動方法など）
• [iOS]Module compiled with Swift 3.0 cannot be imported in Swift 3.0.2 エラー
• [Android]localhostエラー：org.apache.http.conn.HttpHostConnectException: Connection to http://localhost refused
• [Android]実機デバッグでdata/dataに保存したファイルを取得する方法
• [WordPress]関連記事を自動表示するレコメンドプラグイン「Similar Posts」
• [Android]エミュレータのショットカットキーまとめ
• [Ruby]エラー：Inspect or clean up the working tree at /tmp/ruby-build・・・
• [Android]課金テストのためベータ版を公開する手順