div2 列のレイアウトをラップするという古くからの問題があります。サイドバーがフローティングになっているため、コンテナ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 ソリューションが役立つ可能性があります。
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すると、含まれる要素の外側に配置されたコンテンツがトリミングされます。
注: float 要素はimgこの例ではタグですが、任意の html 要素である可能性があります。
CSSMojo のThierry Koblentz は次のように書いています。彼は、oldIE のサポートをやめることで、ソリューションを 1 つの css ステートメントに単純化できると指摘しました。さらに、display: block( の代わりにdisplay: table) を使用すると、clearfix を持つ要素が兄弟である場合にマージンを適切に折りたたむことができます。
.container::after {
content: "";
display: block;
clear: both;
}
これは clearfix の最新バージョンです。
⋮</p>
⋮</p>
以下のソリューションは、最新のブラウザーには必要ありませんが、古いブラウザーを対象とする場合に役立つ場合があります。
これらの解決策はブラウザのバグに依存しているため、上記の解決策がどれもうまくいかない場合にのみ使用してください。
それらは大まかに時系列順にリストされています。
CSS Mojoの Thierry Koblentz は、最新のブラウザーをターゲットにする場合zoom、::beforeプロパティ/値を削除して、次のように単純に使用できるようになったことを指摘しました。
.container::after {
content: "";
display: table;
clear: both;
}
このソリューションは、意図的に IE 6/7 をサポートしていません。
Thierry も次のように述べています。マージンの崩壊。」
世界的に採用されている最新の 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;
}
プロパティを使用して IE の「hasLayout」を設定するのではなく、要素の「hasLayout」をトリガーするdisplayために他のプロパティを使用できます。
.container {
overflow: hidden;
zoom: 1;
display: block;
}
overflowプロパティを使用してフロートをクリアする別の方法は、アンダースコア ハックを使用することです。IE はアンダースコアで始まる値を適用しますが、他のブラウザーは適用しません。このzoomプロパティは、IE でhasLayoutをトリガーします。
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
これは機能しますが...ハックを使用するのは理想的ではありません。
この古い「Easy Clearing」メソッドには、よりトリッキーな CSS を犠牲にして、配置された要素をコンテナーの境界の外にぶら下げることができるという利点があります。
このソリューションはかなり古いものですが、Position Is Everything で Easy Clearing のすべてを学ぶことができます: http://www.positioniseeverything.net/easyclearing.html
何かをすばやく叩きつけるときの、簡単で汚い解決策 (いくつかの欠点があります):
<br style="clear: both" /> <!-- So dirty! -->
<br style="clear: both" />、マークアップの周りに散らばっているすべてのタグを削除する必要はありません。ものをフローティングする場合、2つの重要な考慮事項があります。
子孫フロートを含みます。これは、問題の要素が、すべてのフローティング子孫をラップするのに十分な高さになることを意味します。（彼らは外にぶら下がっていません。）
子孫を外側のフロートから絶縁します。これは、要素の内側の子孫が使用できclear: both、要素の外側のフロートと相互作用しないようにする必要があることを意味します。
これらの両方を行う唯一の方法があります。そして、それは新しいブロックフォーマットコンテキストを確立することです。ブロックフォーマットコンテキストを確立する要素は、フロートが相互に作用する断熱長方形です。ブロックフォーマットコンテキストは常に、フローティングの子孫を視覚的にラップするのに十分な高さであり、ブロックフォーマットコンテキストの外側のフロートが内部の要素と相互作用することはありません。この双方向の断熱材はまさにあなたが望むものです。IEでは、これと同じ概念がhasLayoutと呼ばれ、を介して設定できますzoom: 1。
ブロックフォーマットコンテキストを確立する方法はいくつかありますが、私がお勧めする解決策はをdisplay: inline-block使用することですwidth: 100%。（もちろん、を使用する場合は通常の注意点があります。そのため、、、を別の要素に使用または配置してくださいwidth: 100%。box-sizing: border-box）paddingmarginborder
おそらく、フロートの最も一般的なアプリケーションは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 ソリューションの問題は、 2つの異なるレンダリングの概念を使用して、IEと他のすべての人に同じ目標を達成することです。IEでは、hasLayoutを使用して新しいブロックフォーマットコンテキストを確立しますが、それ以外の場合は、生成されたボックス（:after）をclear: bothで使用します。これは、新しいブロックフォーマットコンテキストを確立しません。これは、すべての状況で物事が同じように動作するわけではないことを意味します。これが悪い理由の説明については、Clearfixについて知っていることはすべて間違っているを参照してください。
Inuit.cssとBourbonで使用されている最新の標準- 非常に広く使用され、よく管理されている 2 つの CSS/Sass フレームワーク:
.btcf:after {
content:"";
display:block;
clear:both;
}
clearfix は基本的に、フレックスボックス レイアウトがより簡単でスマートな方法で提供できるようになったことに対するハックであることを覚えておいてください。CSS フロートはもともと、インライン コンテンツ (長いテキスト記事の画像など) が流れるように設計されており、グリッド レイアウトなどには適していません。特に古い (Edge ではない) Internet Explorer をターゲットにしている場合を除き、ターゲット ブラウザーは flexboxをサポートしているため、時間をかけて学習する価値があります。
これは IE7 をサポートしていません。IE7 をサポートするべきではありません。そうすることで、ユーザーを未修正のセキュリティ エクスプロイトにさらし続け、他のすべての Web 開発者の生活を困難にしています。これは、ユーザーや組織がより安全な最新のブラウザーに切り替えるというプレッシャーが軽減されるためです。
この clearfix は、2012 年 7 月に Thierry Koblentz によって発表され、説明されました。これにより、 Nicolas Gallagher の 2011 年の micro-clearfixから不要な重みが取り除かれます。その過程で、独自の使用のために疑似要素を解放します。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;
}
オーバーフロー プロパティを使用すると、追加のマークアップなしでフロートをクリアできます。
.container { overflow: hidden; }
これは IE6 を除くすべてのブラウザーで機能します。IE6 では、hasLayout を有効にするだけです (ズームが私の好みの方法です)。
.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+ と互換性があります:)
大量の返信を考えると、投稿するつもりはありませんでした。ただし、この方法は私を助けたように、誰かを助けるかもしれません。
言及する価値があるのは、私はエボラのような浮遊物を避けているということです. 多くの理由があり、私は一人ではありません。クリアフィックスとは何かについての六道の回答を読んでください。私の意味がわかります。彼自身の言葉で：...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...
float 以外にも良い (場合によってはもっと良い) オプションがあります。テクノロジーが進歩し、改善されるにつれて、フレックスボックス(およびその他の方法) が広く採用されるようになり、フロートは単なる悪い思い出になります。多分CSS4？
まず最初に、命の恩人がパンクして HTML フローが沈み始めるまでは、フロートから安全だと考える場合があります。
以下の codepen http://codepen.io/omarjuvera/pen/jEXByaでは、float を (または他の要素で) クリアする慣行<div classs="clear"></div>は一般的ですが、眉をひそめ、アンチセマンティックです。
<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;
}
しかし、あなたのフロートが航海に値すると思ったとき...ブーム！画面サイズがどんどん小さくなると、下の図のような奇妙な動作が見られます (同じ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: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: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 マークアップを必要としません。かわいいリボンと帯
フローティングコンテナに親要素がある場合は、ie6にoverflow:hidden/とheightを使用するだけで十分です。auto
以下に示す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で機能しない場合は、親をフロートしてフロートをクリアします。
#test {
float: left; // using float to clear float
width: 99%;
}
他の種類のクリアリングはまだ必要ありません。多分それは私が私の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();
}
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;
}
}
I have tried all these solutions, a big margin will be added to <html> element automatically when I use the code below:
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
Finally, I solved the margin problem by adding font-size: 0; to the above CSS.
私もフロート#contentします。そうすれば、両方の列にフロートが含まれます。#contentまた、サイドバーをクリアせずに内部の要素をクリアできるためです。
ラッパーについても同じですが、2つの列をラップするには、ブロックフォーマットコンテキストにする必要があります。
この記事では、使用できるいくつかのトリガーについて説明します 。ブロックフォーマットコンテキスト。
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! -->
css hack を使用して、HTML の 1 行でできることをしようとするのはなぜですか。そして、行に戻るためにセマンティック html tu put break を使用しないのはなぜですか?
Fo meは本当に使いやすいです：
<br style="clear:both" />
また、html にスタイルが必要ない場合は、ブレークにクラスを使用.clear { clear:both; }して CSS を挿入するだけです。
これの利点:
私は常にマイクロクリアフィックスを使用しています：
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
*/
.cf {
*zoom: 1;
}
カスケード フレームワークでは、ブロック レベルの要素にデフォルトで適用します。IMO、デフォルトでブロックレベル要素に適用すると、ブロックレベル要素は従来の動作よりも直感的な動作になります。また、Cascade Framework (最新のブラウザーだけでなく IE6-8 もサポートする) に古いブラウザーのサポートを追加するのが非常に簡単になりました。
この 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 でも問題なく動作します。
これを CSS に入れることもできます。
.cb:after{
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
*:first-child+html .cb{zoom: 1} /* for IE7 */
そして、クラス「cb」を親 div に追加します。
<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>これを試しましたか：
<div style="clear:both;"/>
この方法で問題はありませんでした。
私のお気に入りの方法は、以下のように css / scss ドキュメントに clearfix クラスを作成することです
.clearfix{
clear:both;
}
そして、以下に示すように、私のhtmlドキュメントでそれを呼び出します
<html>
<div class="div-number-one">
Some Content before the clearfix
</div>
<!-- Let's say we need to clearfix Here between these two divs --->
<div class="clearfix"></div>
<div class="div-number-two">
Some more content after the clearfix
</div>
</html>