CSSで段組み作成する場合の基本の基本、「float」についてメモる。
調べれば星の数ほどでてくることなので、説明は特に無しでいきます。
例えば、
< div class = "parent-div" > |
< div class = "child-div" ></ div > |
< div class = "child-div" ></ div > |
</ div > |
.parent-div{ |
clear : both ; |
} |
.child-div{ |
float : left ; |
} |
の場合、child-divクラスの高さが、parent-divクラスに計算されませんので、ほぼ高さのないdivになってしまいます。こういう場合、CSSハックなどで対処できます。
親要素のdivに以下のクラスを追加し、
< div class = "parent-div clearfix" > |
< div class = "child-div" ></ div > |
< div class = "child-div" ></ div > |
</ div > |
.clearfix:after{ |
content : "." ; |
display : block ; |
height : 0 ; |
clear : both ; |
visibility : hidden ; |
} |
.clearfix{ |
display :inline- block ; |
min-height : 1% ; /* for IE 7*/ |
} |
こうすることで、子の高さを計算して親要素に反映してくれます。
ついでですが、CSSハックで対処するのが定石だと思っておりましたが、最近、overflowでも対処できることに気づきましたので一応書いておきます。
< div class = "parent-div" > |
< div class = "child-div" ></ div > |
< div class = "child-div" ></ div > |
</ div > |
.parent-div{ |
clear : both ; |
_zoom: 1 ; |
overflow : hidden ; |
} |
.child-div{ |
float : left ; |
} |
_zoomとoverflowの指定をすることで、同じ処理ができるようです。