Home > CSS Archive
CSS Archive
floatで流し込んだ最後にclear:bothで解除する為のボックスが無い場合のテクニック
テクニックというより使わざるを得ないテクの覚書です。
floatで流し込んだ最後にclear:bothで解除する為のボックスが無い場合に親ボックスの高さの算出をするためのルールセットになります。
/* float clear */
div#container::after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
/* for IE67 for macIE5x*/
div#container {
width: 100%;
/*￥*/*/
overflow: hidden;
/**/
}
（￥は半角小文字で記載する）
- Comments: 0
- TrackBacks: 0
CSSの構文
例えば複数人で作業する上で基礎としてまず頭に叩き込んでおきたいのが構文。
Dreamweaverでは勝手に揃えてくれるのだが、まあ、それにあわせて覚えるのがよいでしょう。
例えば
div#contents＿{
margin:＿auto;
width:＿800px;
background-color:＿#64F3FF;
background:＿#ffffff＿url(img/back_side.gif)＿no-repeat;
}
のように記載します。
div#contentsがセレクタになりそのあとにスペースが入り「{」を入れ改行します。
marginがプロパティとなり「:」で区切りそのあとにスペースを入れ値（value）を記載して「;」（セミコロン）で改行。
最後に「}」で閉じます。
文章にするとわかりにくいですが上記の規則集合（Rule set）を見て理解しましょう。
アンダーバーはスペースに置き換えて見てください。
- Comments: 0
- TrackBacks: 0
Home > CSS Archive
