overflow:hiddenでfloatをclear - とその理由 | Takazudo Clipping*
以下のように指定するとfloatをclearできる模様。 <div class="Box1"> <div class="L">something long text</div> <p>something short text</p> </div> .Box1{ width:400px; overflow:hidden; } .L{ width:130px; float:left; } overflow:hiddenでfloatをclearしたサンプル これで:afterでゴニョゴニョやったりclear:bothを利用しなくてもfloatがクリアできるみたいです。以下のページで知りました。 画像が消えたり、繰り返さなかったり系が解決しそうなこと overflow:hiddenって、飛び出たのクリップされるんでないの？ しかし、普通に考えると、これでなぜfloatがクリアできるかは甚だ疑問です
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
俗に言う clearfix と言われるコードのバリエーション色々 - lucky bag
clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－ clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/ } ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる
clearfixはちゃんと考えられていた - 3ping.org
clearfixの決定版を作るについてコメントしたのですが、なぜか僕のTypeKeyが認証失敗になってしまい、がんばって書いた文章がお伝えできず、消すのももったいないからこっちに書きます。 こんにちは。 僕も以前、clearfixの記述について、なぜあんなに複雑なのか疑問に思いました。CASE10の記述がfloatのclearに必要な最低限の記述とし、ピリオドやvisibility,heightは必要無いんじゃないかとさまざまなブラウザーで検証したのですが、contentで何かを記述しないとボックスが生成されずに正常にクリアできないブラウザーがありました。そして、生成したボックスを消すために、visibilityやheight:0が必要になりました。 モダンブラウザの中でも特にモダン（笑）なものに限ればCASE10だけで大丈夫のようです。ただやはりこういったものは出来るだけ多くのブラウザで
web-conte.com | blue | 世に言うclearing問題（直前のfloatだけをclearしたい）
さて、上山君に質問をもらっていた件の、（私なりの）解答編。おさらいだが、質問は次のようなものだった。 ４２３１のソースをテーブルからスタイルシートに書き換えているのですが、floatタグで英夫日記を左に寄せて、恭子日記を右に来るようにすると、恭子日記で写真がある後にclear:leftしたときに、次の行が英夫日記の下まで飛んでしまいます。 clearが一個上のfloatまでしか効かないようにするにはどうすればいいのでしょうか？ まず最初に断っておかないといけないのは、ブラウザのこの「気の利かない」挙動（CSS解釈）はべつにバグなのではなくて、CSSの仕様に従った正しいものであるということ。「clear」は基本的に、それ以前にあるすべての「float」を解除する（ただしもちろん「clear: left」は「float: left」のみを、「clear: right」は「float: righ
「clearfix」のIE 7対策：その２
フロートした要素がはみ出してしまうのを回避する「clearfix」のIE 7対応版として、「min-height:1%」の紹介をしましたが、今回はほかの対応方法の紹介です。 IE5を対応ブラウザにするかしなかで、分けてみました。 clearfixのIE5.5～IE7対応版 clearfixのIE5～IE7対応版 clearFixの注意点 clearFixの紹介サイト（英語） 「clearfix」のIE5.5～IE7対応版 「.clearfix」に「zoom:1;」を指定します。 .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } <span class="accent1">.clearfix{ zoom:1; }</span>
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki
「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
構造のマークアップなしでフロートをクリアする方法