clearfixでfloatを解除 | d-spica

clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;

[sutara_lumpur]

こんな便利な方法があるなんて知りませんでした…。 #CSS

[hanagejet]

枠や背景が消えたり，途中で切れたりしたことはありませんか。

[yamakona]

clearfix

[ma_nya_n]

clearfix

[mathemathiko]

わかりやすい。

[chibi_cucciolo]

CSS

[shusatoo]

floatの動きがものすごく分かりやすい！

[sora0310]

float解除

[tktomi]

float解除

[vitaminsii]

便利！clearfix！！

[smotokezuru]

float使った時のclearfixの説明の中ではこれがわかりやすかった

[hiranotaguti]

clearfix

[tomoworks]

clearfix、だよね。なんでたまにだめなんだろ？

[ichigaya555]

ちゃんとしてる

[kazuya6012]

clearfix

[jorira]

css clearfix

[nyanzou4649]

[復習8/09]

[sheng]

clearfix

[tate-h]

バグ対策

[chimantare]

clearfix floatを解除するおまじない

[gnt]

ふむふむはー。おまじないはやっぱレガシー用だったのか。

[Okky]

clearfixで空divとはオサラバ！

[artzt]

画像が途中で切れてしまった場合に使ってみるテスト

[nikutaiha]

あとでよむ

[magotora]

のタグを細かく説明していただいています。[float][レイアウト][css][webデザイン]

[dirablue]

clearfix

[qinmu]

CSS。

[matubuse]

clearfixという手法 こうしたややこしい問題を解決してくれるのが clearfix という手法です。:afterの疑似要素とcontentプロパティで新たなボックスを入れ，これにclearをあてるものです。

[microgravity]

いまさら

[saro363]

clearfixの使い方。