「clearfix」にはどのような方法がありますか？
私はdivが2列のレイアウトを包むという古くからの問題を抱えています。私のサイドバーは浮いているので、私のコンテナdivはコンテンツとサイドバーをラップできません。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
Firefoxの明確なバグを修正する方法はたくさんあります。
<br clear="all"/>overflow:autooverflow:hidden
私の状況では、正しく機能するように思われる唯一のものは<br clear="all"/>ソリューションで、これは少し巧妙です。 overflow:autoは私に厄介なスクロールバーを与えます、そしてoverflow:hiddenは確かに副作用があるはずです。また、IE7はその不正確な動作のためにこの問題に苦しむべきではないようですが、私の状況ではFirefoxと同じように苦しんでいます。
現在利用可能な方法はどれが最も堅牢ですか？
作成されているデザインに応じて、以下のclearfix CSSソリューションにはそれぞれ独自の利点があります。
Clearfixには便利なアプリケーションがありますが、ハッキングとしても使われています。あなたがclearfixを使用する前に、おそらくこれらの現代的なcssソリューションは役に立つかもしれません：
最新のClearfixソリューション
overflow: auto;を持つコンテナ
浮動要素を消去する最も簡単な方法は、包含要素にoverflow: autoというスタイルを使用することです。この解決策は現代のあらゆるブラウザで機能します。
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
欠点として、外部要素にマージンとパディングの特定の組み合わせを使用するとスクロールバーが表示されることがありますが、これは別の親を含む要素にマージンとパディングを配置することで解決できます。
'overflow：hidden'を使うこともclearfixの解決策ですが、スクロールバーは持ちません、しかしhiddenを使うことはそれを含んでいる要素の外側に置かれた内容を切り取るでしょう。
注： この例では、浮動要素はimgタグですが、任意のhtml要素でもかまいません。
Clearfixリロード
CSSMojoのThierry Koblentzは、次のように書いています： 最新のclearfixがリロードされた 。彼は、oldIEのサポートをやめることで、このソリューションを1つのcssステートメントに単純化できることを指摘しました。さらに、（display: blockの代わりに）display: tableを使用すると、clearfixを持つ要素が兄弟である場合にマージンを適切に折りたたむことができます。
.container::after {
content: "";
display: block;
clear: both;
}
これは最新バージョンのclearfixです。
⋮
⋮
以前のClearfixソリューション
以下の解決策は現代のブラウザには必要ありませんが、古いブラウザをターゲットにするのに役立つかもしれません。
これらの解決策はブラウザのバグに頼っているため、上記の解決策がどれもうまくいかない場合にのみ使用してください。
それらはおおまかに年代順に記載されています。
「Beat That ClearFix」、最近のブラウザ用のclearfix
Thierry Koblentzの CSS Mojo は、現代のブラウザをターゲットにしているとき、zoomと::beforeのプロパティ/値を削除して、単に使うことができることを指摘しました。
.container::after {
content: "";
display: table;
clear: both;
}
このソリューションはIE 6/7をサポートしていません…意図的に！
" 注意書き ：最初から新しいプロジェクトを始めたなら、それを試してください。あなたがサポートしていないとしても、あなたが今持っているものと入れ替えないでください。" oldIE、あなたの既存のルールはマージンの縮小を防いでいます。」
マイクロクリアフィックス
最新かつ世界的に採用されているclearfixソリューション、 Nicolas GallagherによるMicro Clearfix 。
既知のサポート：Firefox 3.5以降、Safari 4以降、Chrome、Opera 9以降、IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
オーバーフロープロパティ
この基本的な方法は、配置されたコンテンツがコンテナの境界の外側に表示されないような通常の場合に適しています。
http://www.quirksmode.org/css/clearing.html - このテクニックに関連する一般的な問題を解決する方法、すなわちwidth: 100%をコンテナに設定する方法を説明します。
.container {
overflow: hidden;
display: inline-block;
display: block;
}
displayプロパティを使用してIEに "hasLayout"を設定するのではなく、他のプロパティを 要素の "hasLayout"をトリガする に使用することができます。
.container {
overflow: hidden;
zoom: 1;
display: block;
}
overflowプロパティを使ってフロートをクリアするもう一つの方法は アンダースコアハック を使うことです。 IEは下線を前に付けた値を適用しますが、他のブラウザは適用しません。 zoomプロパティは、IEの hasLayout をトリガーします。
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
これはうまくいきますが…ハックを使うのは理想的ではありません。
PIE：簡単決済方法
この古い "Easy Clearing"メソッドには、CSSの手間がかかりますが、配置された要素をコンテナの境界の外側にぶら下げることができるという利点があります。
この解決策はかなり古くからありますが、あなたはポジションが簡単であることについてのすべてを学ぶことができます： http://www.positioniseverything.net/easyclearing.html
"clear"プロパティを使用している要素
すばやく汚い解決策（いくつかの欠点はあります）をすばやくまとめていくときに使用します。
<br style="clear: both" /> <!-- So dirty! -->
欠点
- それは反応しないので、レイアウトスタイルがメディアの問い合わせに基づいて変更されるならば、望ましい効果を提供しないかもしれません。純粋なCSSのソリューションがより理想的です。
- 意味的な値を追加することなく、HTMLマークアップを追加します。
- これは、css内の「clearfix」の単一の解決策へのクラス参照およびhtml内のそれへのクラス参照よりも、各インスタンスごとにインライン定義および解決策を必要とします。
- それを回避するためにより多くのハックを書かなければならないかもしれないので、それは他の人にとってコードを扱うのを難しくします。
- 将来、別のclearfixソリューションを使用する必要があるとき、またはマークアップの周りに散らばっているすべての
<br style="clear: both" />タグを削除する必要はありません。
どのような問題を解決しようとしていますか？
ものを浮かべるときには、2つの重要な考慮事項があります。
子孫フロートを含む。 これは、問題の要素がすべての浮遊子孫をラップするのに十分な高さになることを意味します。 （彼らは外にハングアップしません。）
![Floating content hanging outside its container]()
子孫を外側のフロートから絶縁する。 これは、要素の内側の子孫が
clear: bothを使うことができて、それが要素の外側のフロートと相互作用しないことを意味します。![<code>clear: both</code> interacting with a float elsewhere in the DOM]()
書式設定コンテキストをブロックする
両方を実行する方法は1つしかありません。そしてそれは新しい ブロックフォーマットコンテキストを確立することです 。ブロックフォーマットのコンテキストを確立する要素は、フロートが互いに相互作用する絶縁された長方形です。ブロックフォーマットコンテキストは常に、その浮遊する子孫を視覚的にラップするのに十分な高さになります。ブロックフォーマットコンテキストの外側のフロートは、内側の要素と対話することはできません。この双方向の断熱材はまさにあなたが望むものです。 IEでは、これと同じ概念が hasLayout と呼ばれています。これはzoom: 1で設定できます。
ブロックフォーマットのコンテキストを確立するにはいくつかの方法がありますが、私がお勧めする解決策はdisplay: inline-blockとwidth: 100%です。 （もちろん、 通常の注意事項 はwidth: 100%を使用する場合があるので、box-sizing: border-boxを使用するか、padding、margin、およびborderを別の要素に配置してください。）
最も堅牢なソリューション
フロートのおそらく最も一般的な用途は2列のレイアウトです。 （3列まで拡張できます）
まずマークアップ構造。
<div class="container">
<div class="sidebar">
sidebar<br/>sidebar<br/>sidebar
</div>
<div class="main">
<div class="main-content">
main content
<span style="clear: both">
main content that uses <code>clear: both</code>
</span>
</div>
</div>
</div>
そして今、CSS。
/* Should contain all floated and non-floated content, so it needs to
* establish a new block formatting context without using overflow: hidden.
*/
.container {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
/* Fixed-width floated sidebar. */
.sidebar {
float: left;
width: 160px;
}
/* Needs to make space for the sidebar. */
.main {
margin-left: 160px;
}
/* Establishes a new block formatting context to insulate descendants from
* the floating sidebar. */
.main-content {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
自分で試してください
JS Bin にアクセスしてコードを試し、このソリューションがどのようにゼロから構築されたかを確認してください。
有害と見なされる従来のclearfix方式
伝統的な clearfixsolutions の問題はそれらがIEと他のみんなに同じ目標を達成するために二つの異なったレンダリング概念を使うということです。 IEでは、新しいブロックフォーマットコンテキストを確立するためにhasLayoutを使用しますが、それ以外のすべての人は生成ブロック（:after）をclear: bothとともに使用します。つまり、すべての状況で物事が同じように動作するわけではありません。なぜこれが悪いのかについての説明は、 Clearfixについて知っていることはすべて間違っている を参照してください。
Inuit.css および Bourbon で使用される新しい標準-非常に広く使用され、よく管理されている2つのCSS/Sassフレームワーク：
.btcf:after {
content:"";
display:block;
clear:both;
}
ノート
Clearfixは、本質的にflexboxレイアウトが はるかに賢い方法 で提供できるもののハックであることに注意してください。 CSSフロートは、元々、インラインコンテンツ（長いテキスト記事の画像のように）が流れるように設計されており、グリッドレイアウトなどのためではありません。 ターゲットブラウザがflexboxをサポートしている の場合、検討する価値があります。
これはIE7をサポートしていません。あなたはIE7をサポートすべきではありません。そうすることで、ユーザーや組織が最新のブラウザーに切り替える圧力が軽減されるため、ユーザーは未解決のセキュリティエクスプロイトにさらされ続け、他のすべてのWeb開発者の生活が難しくなります。
このクリアフィックスは、2012年7月に Thierry Koblentzによって発表および説明された でした。 Nicolas Gallagherの2011年のマイクロクリアフィックス から不必要な重みを取り除きます。このプロセスでは、疑似要素を自由に使用できるようにします。これはdisplay: blockではなくdisplay: tableを使用するように更新されました（再び、Thierry Koblentzの功績です）。
http://html5boilerplate.com/ から取得した次のものを使用することをお勧めします。
/* >> The Magnificent CLEARFIX << */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
Overflowプロパティは、追加のマークアップなしでfloatをクリアするために使用することができます。
.container { overflow: hidden; }
これは、あなたがする必要があるのがhasLayoutを有効にすることだけであるIE6を除くすべてのブラウザのために働きます（ズームは私の好みの方法です）：
.container { zoom: 1; }
私は公式のCLEARFIXメソッドにバグを発見しました：DOTはフォントサイズを持っていません。 height = 0を設定し、DOMツリーの最初の要素にクラス "clearfix"が設定されている場合は、ページ下部に余白が12px :)表示されます。
このように修正する必要があります。
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
それは現在YAMLレイアウトの一部です...それをちょうど見てください - それは非常におもしろいです！ http://www.yaml.de/en/home.html
これはかなりきちんとした解決策です。
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
Firefox 3.5以降、Safari 4以降、Chrome、Opera 9以降、IE 6以降で動作することが知られています。
：beforeセレクタを含めることで浮動小数点数をクリアする必要はありませんが、最近のブラウザでは上マージンが崩れるのを防ぎます。これにより、zoom：1が適用されたときにIE 6/7と視覚的に一貫性が保たれます。
ブートストラップからのClearfix：
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
私はただ使用します： -
.clear:after{
clear: both;
content: "";
display: block;
}
IE8 +と互換性があり、互換性があります。
膨大な数の返信を考えると、投稿するつもりはありませんでした。しかし、この方法は私にとっては役に立ちましたが、誰かに役立つかもしれません。
可能な限りフロートからの道をとどまる
それは言及する価値がある、私はエボラのようなフロートを避けます。多くの理由があり、私は一人ではありません。 Rikudoの回答を読んで クリアフィックスとは何ですか あなたは私が何を言っているのか分かるでしょう。彼自身の言葉で：...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...
フロート以外の他の良い（そして時々より良い）オプションがあります。技術が進歩し進歩するにつれて、 flexbox （および他の方法）が広く採用されるようになり、floatは単なる悪いメモリになるでしょう。たぶんCSS4？
フロートの不正行為と失敗したクリア
まず最初に、あなたの命の恩人がパンクしてあなたのhtmlフローが沈み始めるまで、あなたはフロートから安全だと思うかもしれません：
以下のcodepen http://codepen.io/omarjuvera/pen/jEXBya では、<div classs="clear"></div>（または他の要素）を使ってfloatをクリアするという慣習が一般的ですが、渋滞しており、意味論的ではありません。
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
_ css _
div {
border: 1px solid #f00;
width: 200px;
height: 100px;
}
div.floated {
float: left;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
しかし 、あなたのフロートがふさわしいと思ったとき…ブーム！画面サイズが小さくなるにつれて、下の図のように奇妙な動作が見られます（Same http://codepen.io/omarjuvera/pen/jEXBya ）。
なぜあなたは気にする必要がありますか？ 正確な数字はわかりませんが、使用されているデバイスの約80％（またはそれ以上）が小さな画面を備えたモバイルデバイスです。デスクトップコンピュータ/ラップトップはもはや王ではありません。
それで終わらない
これはフロートの唯一の問題ではありません。たくさんありますが、この例ではall you have to do is to place your floats in a containerと言う人もいます。しかし、 codepen とグラフィックでわかるように、そうではありません。それは明らかに物事を最悪にしました：
HTML
<div id="container" class="">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
#container {
min-height: 100px; /* To prevent it from collapsing */
border: 1px solid #0f0;
}
.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
結果は？
それは同じだ！ 
ご存知のとおり、CSSパーティーを始めて、あらゆる種類のセレクターとプロパティーをパーティーに招待します。あなたが始めたものよりあなたのCSSをもっとめちゃくちゃにすること。フロートを直すだけです。
救済へのCSS Clearfix
このシンプルで非常に適応性の高いCSSは、美しさと「救世主」です。
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
それでおしまい！それは意味論を壊すことなく本当に機能します、そして私は言及しました それは機能しますか？ ：
同じサンプルから... _ html _
<div class="clearfix">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div>
<section>Below</section>
_ css _
div.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
section {
border: 4px solid #00f;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
これで、<div classs="clear"></div> <!-- Acts as a wall -->は必要なくなり、セマンティック警察は幸せになりました。これが唯一の利点ではありません。このclearfixは、最も単純な形で@mediaを使用せずに任意の画面サイズに対応しています。言い換えれば、それはあなたのフロートコンテナを抑制し、洪水を防ぎます。最後に、それは1つの小さな空手チョップですべての古いブラウザのサポートを提供します=）
これもまたclearfixです
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
私はいつも私のグリッドのメインセクションを浮かせて、フッターにclear: both;を適用します。追加のdivやクラスは必要ありません。
.clearFix:after {
content: "";
display: table;
clear: both;
}
正直なところすべての解決策はレンダリングのバグを修正するためのハックのようです...私は間違っていますか？
私は<br clear="all" />が最も簡単で、最も単純であることがわかりました。いたるところでclass="clearfix"を見ても、無関係なマーケティング要素に異議を唱える人の感性を害することはできませんね。問題を別のキャンバスに描いているだけです。
私はまたdisplay: hiddenソリューションを使用します。これは素晴らしく、余分なクラス宣言やhtmlマークアップを必要としません。かわいいリボンとサッシ
LESS（ http://lesscss.org/ ）を使えば、便利なclearfixヘルパーを作成できます。
.clearfix() {
zoom: 1;
&:before {
content: '';
display: block;
}
&:after {
content: '';
display: table;
clear: both;
}
}
そして、問題のあるコンテナでそれを使用します。例えば：
<!-- HTML -->
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
/* LESS */
div#container {
.clearfix();
}
浮動コンテナに親要素がある場合は、ie6にoverflow:hidden/autoとheightを使用すれば十分です。
下記のHTMLがフロートをクリアするために、＃testのどちらかがうまくいく可能性があります。
#test {
overflow:hidden; // or auto;
_height:1%; forces hasLayout in IE6
}
<div id="test">
<div style="floatLeft"></div>
<div style="random"></div>
</div>
これがie6で動作することを拒否する場合は、単にfloatをクリアするために親をフロートさせてください。
#test {
float: left; // using float to clear float
width: 99%;
}
まだ他の種類の決済を実際に必要としたことはありません。たぶんそれは私が私のHTMLを書く方法です。
これらの解決策をすべて試しましたが、以下のコードを使用すると<html>要素に自動的に大きな余白が追加されます。
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
最後に、上記のCSSにfont-size: 0;を追加することでマージン問題を解決しました。
SASSでは、clearfixは次のとおりです。
@mixin clearfix {
&:before, &:after {
content: '';
display: table;
}
&:after {
clear: both;
}
*zoom: 1;
}
そしてそれは次のように使われます。
.container {
@include clearfix;
}
新しいclearfixが欲しいなら：
@mixin newclearfix {
&:after {
content:"";
display:table;
clear:both;
}
}
新しい表示値は1行でジョブに見えます。
display: flow-root;
W3の仕様から、「要素はブロックコンテナボックスを生成し、フローレイアウトを使用してそのコンテンツをレイアウトします。常にコンテンツの新しいブロックフォーマットコンテキストを確立します。」
情報： https://www.w3.org/TR/css-display-3/#valdef-display-flow-roothttps://www.chromestatus.com/feature/5769454877147136
※上のリンクにあるように、現在サポートは限られているので、以下のような代替サポートが役に立つかもしれません： https://github.com/fliptheweb/postcss-flow-root
Clearfixは要素がそれ自身の後で自動的にクリアするための方法です、それであなたは追加のマークアップを追加する必要はありません。
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.cleaner {
clear: both;
}
通常は次のようにする必要があります。
<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->
Clearfixでは、あなたがする必要があるだけです
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
私は#contentもフロートさせます、そのように両方の列はフロートを含みます。サイドバーをクリアせずに#content内の要素をクリアすることも可能になるからです。
ラッパーと同じことですが、2つの列を折り返すには、それをブロックフォーマットのコンテキストにする必要があります。
この記事はあなたが使うことができるいくつかのトリガーに言及します： ブロックフォーマットコンテキスト 。
1行のHTMLを処理するのにcss hackを使用するだけの理由そして、なぜセマンティックhtml tuを使用しないで改行すると改行するのでしょうか。
私には本当に使うほうがいいです：
<br style="clear:both" />
そして、あなたがあなたのhtmlにスタイルを必要としないのなら、あなたはあなたの休憩のためにclassを使い、あなたのCSSに.clear { clear:both; }を入れるだけでいいのです。
これの利点：
- 行に戻るためのhtmlの意味的使用
- CSSがロードされていない場合は動作します
- 追加のCSSコードやハックは不要
- cSSでbrをシミュレートする必要はありません。すでにHTMLに存在します。
このHTML構造を使用していると仮定します。
<div id="container">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
これが私が使用するCSSです：
div#container {
overflow: hidden; /* makes element contain floated child elements */
}
div#content, div#sidebar {
float: left;
display: inline; /* preemptively fixes IE6 dobule-margin bug */
}
私はこのセットをいつも使っています、そしてそれは私にとって、IE6でさえうまく働きます。
私はいつも micro-clearfix を使います。
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
*/
.cf {
*zoom: 1;
}
Cascade Frameworkの場合 ブロックレベルの要素にデフォルトで適用することすらあります。 IMOがデフォルトでブロックレベルの要素に適用すると、ブロックレベルの要素は従来の動作よりも直感的に動作します。また、Cascade Framework（これは、最新のブラウザーと同様にIE 6-8もサポートしています）に、古いブラウザーのサポートを追加するのがはるかに簡単になりました。
他のクリアフィックスとは異なり、ここではコンテナのないオープンエンドのものです
他のクリアフィックスは、浮遊要素が十分にマークされたコンテナー内にあることを必要とするか、または追加の、意味的に空の<div>を必要とします。逆に、コンテンツとマークアップを明確に分離するには、この問題に対して 厳密なCSSソリューション が必要です。
フロートの終わりをマークする必要があるという単なる事実は、 無人CSS組版 を許可しません。
後者があなたの目的であるならば、 "clearfix"に遭遇するまで、それをラップアラウンドするために何でも（パラグラフ、順序付きおよび順序なしリストなど）フロートを開いたままにしておくべきです。たとえば、clearfixは新しい見出しによって設定されることがあります。
これが、私が新しい見出しで次のようなclearfixを使う理由です。
h1 {
clear: both;
display: inline-block;
width: 100%;
}
この解決法は問題を解決するために 私のウェブサイト で広く使われるようになりました：浮遊するミニチュアの隣のテキストは短く、次のクリアオブジェクトの上マージンは尊重されません。
また、サイトから PDF を自動的に生成するときの手動操作を防止します。これは example page です。
これをCSSに入れることもできます。
.cb:after{
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
*:first-child+html .cb{zoom: 1} /* for IE7 */
そして、親のdivに "cb"クラスを追加します。
<div id="container" class="cb">
あなたはあなたの元のコードに何か他のものを追加する必要はないでしょう...
#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}<div id="container">
<div id="content">text 1 </div>
<div id="sidebar">text 2</div>
<div class="clear"></div>
</div>