CSSフロー制御：書式設定コンテキストの作成

clear



またはoverflow



プロパティだけでなく、フローを制御できます 。 display:inline-block



またはdisplay:table-cell



を使用すると、前述のoverflow



完全に置き換えることができ 、要素のサイズを指定したり、追加機能を提供したりするリスクがなくなります。



この記事には普遍的なソリューションは含まれていませんが、フロー制御のための追加ツールがあなたの目に開かれています。



ブロック要素のコンテキスト形式に関する段落の完全な翻訳は次のとおりです（ css仕様から ）。

フローティング、絶対配置、テーブルセル（ table-cell



）またはテーブルヘッダー（ table-caption



）、インラインブロック（ inline-block



）、およびvisible



以外のoverflow



持つ要素としてvisible



（値がエリアに継承される場合はカウントしない）ビュー）書式設定の新しいコンテキストを設定します

フローティング要素と絶対配置要素を使用すると、すべてが明確になると思います。 「 overflow



」もあります。 テーブルヘッダーを使用した実験では何も生じなかったことをすぐに付け加えます。



重複しないようにするため、新しいコードはどこでも使用され、元々次のスタイルコードが記述されていることを発表します。

 #sidebar{ width:30px; height:200px; background-color:#ddd; float:left; } #content{ background-color:#dcd; } #content .col{ float:left; height:50px; width:30px; text-align:center; background-color:#cdd; } #content2{ background-color:#ddc; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

およびマークアップ：

 <div id="sidebar"> side </div> <div id="content"> <div class="col"> col1 </div> <div class="col"> col2 </div> <div class="col"> col3 </div> </div> ff <div id="content2"> more content </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードは、ブラウザーで次のようにレンダリングされます。

1. display:inline-block

それでは、 display:inline-block



が可能なdisplay:inline-block



見てみましょう。



firefoxとieを修正しdisplay:inline



（hasLayout display:inline



がdisplay:inline-block



ように機能する場合）



余分な水平方向のスペースであるvertical-align:bottom



IEの*vertical-align:0%



を追加し、Operaのテキストを下げます（ vertical-align:text-bottom



）。



垂直方向のスペースは、 hasLayout



1つの要素で結合され、別の要素でfloat



するときに表示されるIEのバグです。 overflow:hidden



を使用しても、 display:inline-block



とは関係なく、それがあなたにとって重要な場合でも*margin-left:-3px



私はあなたの肩に解決策を探して、今のところ*margin-left:-3px



を使用します





残念ながら、すべてが見た目ほど良いわけではありません。 問題は 2番目のffにあり-moz-inline-block



。 ただし、この場合、 float



プロパティを持つすべての列は正常に表示されます。

display:table-cell

display:table-cell



開始しましょうdisplay:table-cell







すべてが素晴らしく、サファリは愚かです- table



書くだけです。つまり、 table-cell



はまったくサポートしていません。それから、少なくともすべてのブラウザで表示するようにします。

何がありますか-

a）要素の幅はコンテンツによって決定されます

b）要素は他の要素をその水平レベルにさせない

display:inline-block



とほぼ同じdisplay:inline-block



、単に行の折り返しを追加します。 IEでこれをすべて行い、既知の欠陥をすぐに修正します。





この方法を使用します。 さらに、コンテナの後にテキストまたは文字列要素ではなくブロック要素がある場合、IEで改行する必要はありません。また、コンテナの幅がわかっている場合は、

1）コンテナのコンテンツではなく幅を定義するため、IEでdisplay-inline



を使用する必要はありません。

2） display-inline



シミュレートしないため、IEで改行する必要はありません。

3）幅によって有効にされるため、hasLayoutを有効にするために個別のプロパティは必要ありません

3. Float

すでに書いたように、floatは新しい書式設定コンテキストも作成します。 役に立つかどうかはわかりませんが、知っておくべきです。 それで、これはどのように現れますか？ float:left



.col



float:left



セットはそれらをストリームから引き出し、それらのコンテナには何も含まれていないように見え、実際、＃contentは幅と高さに設定されない限り表示されません。 確認するために、 .col



（およびそれ以降のすべての見掛け倒し）から背景を削除しましょう。

.col



からbackground-color



を削除しbackground-color







そして、今度は何overflow:hidden



か見てみましょうoverflow:hidden



がもたらす（つまり、 hasLayout



含む）



table



（つまり、明らかな理由で省略）



そして最後にfloat:left



（あなたができるとright



）。





ブラウザーはこれらの例と絶対配置のために個別のフォーマットコンテキストを作成するため、パフォーマンスを向上させるために、Javaスクリプトが操作する要素は、絶対配置されたコンテナーだけでなく、上記のいずれにも配置されると考えられます。



これらの手法を使用して、 clear



およびoverflow



プロパティに固有の問題を解決し、ページを処理するブラウザーのパフォーマンスを向上させることができます。



私のサイトのCSSでのフロー制御に関する記事：フォーマットコンテキストの作成