CSSのお勉強 | ひとことメモ日記 (2008年5月 4日 15:11)
GWというよりも、普通の土日の今日は最終日。 明日から、また、仕事です。 今まで仕事では、サーバー周りの仕事からWeb開発の仕事をしてきました。 今、W...
Category : XHTML/CSS
カレンダーをリストでマークアップ | Re: CSSによるデザインワークと相性 
flaotを解除する3つの方法
2008-04-18
1
0
XHTML/CSS
CSS, float
以前，clearfix を紹介するエントリを書きました。
float を解除しないと，float した要素を含む親要素の border や background が途中で切れてしまうことがあります。
clearfix
float とは文字通り「浮動」させることで，概念上は浮動した要素は親要素に入っていないことになります。
clear すると，clear した要素のところまで親要素の高さが出てきます。
これをCSS上で処理するのが clearfix です。
overflow: hidden;
しかし，clearfix を使わなくても，
div.parent {
overflow: hidden;
width: 540px;
}
という記述で，親要素の border や background を下まで表示させることができ，回り込みを終了できます。
IE以外のモダンブラウザは，overflow: hidden;とすることで，float した要素の高さが，それを含む親要素にも反映されるようになります。
IEでは，親要素の width か height を明示的に指定すると，float した子要素の高さが反映されるようになります。
このあたりの詳細は次のページを参考にしてください。
flaotを解除する3つの方法
float を解除し，float した要素の高さを含むように親要素の高さを決める方法として，3つの方法があるわけです。使用の優先順を付けるとすると...。
- 1. 適当な要素で clear
- これがもっとも確実で，問題が少ないな方法でしょう。しかし，clear する適当な要素が入れられない場合もあります。
- 2. 親要素に
overflow: hidden;と width または height を明示 - clearfix のような仰々しい記述をしなくて済むので，手軽に使えます。しかし，
overflow: hidden;を充てると困る場合，width や height を指定しない方がよい場合もあります。 - 3. clearfix
- 上記2つが使えない場合のとっておきとして，用意しておくのがよさそうです。
overflow: hidden;による方法は厳密には float を clear したことにはなっていません。十分な高さが確保されたため，後続する要素が下にまわったというだけのことです。また，この方法では Netscape7.1 で内容が表示されなくなります。
Trackback (0)
Trackback URL :
http://blog.d-spica.com/MT/mt-tb.cgi/29
Add Comment
Search
XHTML/CSS Category Entries
- table と caption の margin
- label のススメ
- CSSの初期化ファイル
- nth-child() 疑似クラスを試してみる
- CSSファイルの分割
- IEで指定どおりのfont-sizeにならない
- すぐに使えそうなネガティブマージン
- dtをfloatする場合の注意点
- Re: CSSによるデザインワークと相性のよいHTMLって？
- flaotを解除する3つの方法
- カレンダーをリストでマークアップ
- IE6, 7 そして 8
- idの命名に迷ったら
- CSSの初期化
- h1をサイトタイトルにする理由
- classをどの要素にふるか
- li要素にdl要素を入れてみる
- 画像置換の問題点
- id="header"で問題ないのでは
- font-size指定
- clearfixでfloatを解除
- サイト全体に連なるh1〜h6
- ul，liでメニューをマークアップ
- dlで写真をマークアップ
- 見出しの階層をちゃんとする
- サイトタイトルを画像にしたら
Archives
Tag Cloud
はてなブックマーク人気エントリー
あわせて読みたい
Contact me
-
Skype : webmugi
Comments (0)