css floatフローティングhaslayoutクリア

1:floatは、指定された要素が通常のドキュメントストリームから逸脱することによって生じる特別なレイアウト特性をもたらす.ブロックレベル要素に適用する必要があります.つまり、フローティングはインラインラベルには適用されません.floatが適用されると、この要素はブロックレベルの要素として指定されます.例えば、インライン要素にfloatを設定した後、幅を設定することができます.

.clear:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}

:after擬似要素は要素の後にコンテンツを追加し、この擬似要素は創作者が要素コンテンツの一番後ろに生成コンテンツを挿入することを可能にする.デフォルトでは、この擬似要素は行内要素ですが、属性displayを使用して変更できます.afterで生成された内容はスペースで、まずdisplay:block、それから高さは0で、彼にレイアウトに影響を与えないで、隠してheight:0と差が少ないのはレイアウトに影響を与えないでください.clear:bothはフローティングをクリアします.afterをサポートしていないブラウザie 6、ie 7はheight:1%を追加します.OKです.そうするとie 6、ie 7はhaslayoutを持っています.
2:haslayput
実はhaslayoutはWindows Internet Explorer 7以下のレンダリングエンジンの内部構成部分で、
InternetExplorer 7以下では、1つの要素が自分自身のコンテンツのサイズと組織を計算するか、親要素に依存してサイズと組織のコンテンツを計算します.この2つの異なる概念を調整するために、レンダリングエンジンはhasLayoutの属性を採用し、属性値はtrueまたはfalseであってもよい.要素のhasLayout属性値がtrueの場合、この要素にはレイアウト(layout)があると言います.1つの要素にレイアウトがある場合、それは自分と可能な子孫要素の寸法計算と位置決めを担当します.簡単に言えば、祖先要素に依存するのではなく、これらの作業を完了します.IE Developer Toolbarでは、IEの下のHTML要素がhaslayout、haslayoutを持つ要素を持っているかどうかを確認できます.通常は「haslayout=-1」と表示されます.
ここでhas layoutは、自分と可能な子孫要素の寸法計算と位置決めを行い、親要素の高さ、つまり親要素が中身の高さに適応していることを決定します.今回は、なぜheight:1%を加えたのかがわかります.もちろん、widthなどの他の属性を加えてhas layoutすることもできます.もちろんfloatを加えてもいいですが(floatはlayoutをトリガーすることもできます)、floaでフローティングをクリアしないでください.floatはまたフローティングを生成します.
,,

, , , <textarea>, , , , , 次のCSSプロパティと値をとると、1つの要素にlayoutが得られます.position:absolute絶対位置決め要素のcontaining blockを含む場合、この点で問題が発生することが多い. float:left|right layout要素の特性のため、フローティングモデルには奇妙な表現がたくさんあります. display:inline-blockは、インラインレベルの要素がlayoutを必要とする場合によく使用されます.これは、このCSS属性の唯一の効果でもあります.ある要素にlayoutを持たせることです.」Inline-block挙動」はIEで実現できるが、非常にユニークである:IE/Win:inline-block and hasLayout. width:「auto」以外の任意の値でlayout関連の問題が発生した場合、これを試して修復するのが一般的です. Height:auto以外の任意の値height:1%はHolly Hackで使用されます. zoom:normal以外の任意の値IE固有属性.でもzoom:1は一時的にデバッグに使えます. writing-mode:tb-rl MS固有属性. overflow:hidden|scroll|auto IE 7ではoverflowもlayoutトリガとなり、この属性は以前のバージョンIEでlayoutの機能をトリガしなかった. overflow-x|-y:hidden|scroll|auto overflow-xおよびoverflow-yは、CSS 3ボックスモデルのプロパティであり、ブラウザから広くサポートされていない.彼らは以前のバージョンIEでlayoutをトリガする機能を持っていなかった. またIE 7のスクリーンにはhaslayoutの俳優が何人か追加されており、hasLayoutという面だけを考えるとmin/maxとwidth/heightの表現が似ていて、positionのfixedとabsoluteもそっくりです. position: fixed min-width:任意の値を0にしてもその要素にlayoutを得ることができます. max-width:「none」以外の任意の値min-height:任意の値を0にしてもその要素のhaslayout=true にすることができる.max-height:「none」以外の任意の値 有关内联级别元素 インライン要素の場合(span要素など、デフォルトでインラインの要素であってもよいし、display:inlineの要素であってもよい)widthとheightはIE 5のみです.xおよびIE 6または更新バージョンのquirksモードでhasLayoutがトリガーされます.一方、IE 6では、ブラウザが標準互換モードで実行されている場合、インライン要素はwidthまたはheight属性を無視するため、widthまたはheightを設定してもlayoutを持つように命令することはできません. zoomはいつもhasLayoutをトリガーすることができますが、IE 5では.0ではサポートされていません. 「layout」を持つ要素もdisplay:inlineであれば、標準でいうinline-blockとよく似ています.段落や普通の文字のように水平方向と連続的に並べられ、vertical-alignの影響を受け、内容に応じてサイズを適応して調整することができます.これは、他のブラウザでdisplay:inlineはインラインであり、IE/Winのようにインライン要素がlayoutを持つとinline-blockになるわけではないため、IE/Winにインライン要素だけを含めることができる理由を説明することもできます. 重置 hasLayout 別のルールで次の属性をデフォルト値にリセットすると、hasLayoutがリセット(または取り消し)されます.hasLayoutを追加する他の属性がない場合は、次のようになります.width,height(「auto」)max-width,max-height(「none」とする)(IE 7において)position(staticとする)float(noneとする)overflow(「visible」とする)(IE 7において)zoom(normalとする)writing-mode(「tb-rl」から「lr-t」に設定)displayプロパティの違い:「inline-block」でhaslayout=trueを設定した場合、独立したルールでこのプロパティを「block」または「inline」と上書きしても、haslayoutというフラグビットはfalseにリセットされません.mid-width、mid-heightをデフォルト値「0」に設定するとhasLayoutが付与されますが、IE 7はhasLayoutをリセットするために不正な属性「auto」を受け入れることができます.