フローティングレイアウトCSS-

フロート

浮動プロパティ

  1. そして右のフロート(フロート:右)2種類:左浮動要素は(左フロート)があり浮いています
  2. 浮動要素が左フロートまたは右に思い出して、親要素の国境を越えて、他の要素が停止しました
  3. ブロック浮動は改行で親の幅を超えて、互いに隣接する要素であってもよく、
  4. (この時のブロックが行要素クリアランスの問題を有していない)行内フローティング要素またはブロック要素が自動的にブロック要素内の行に変換されてみましょう
  5. いいえバックフロート浮動要素は、テキストが図の効果についての単語を形成するために、浮動要素を回避しませんフロートのフロートの位置を占めていないでしょう。
  6. あなたは(一般的に、高度に設定されていない)親要素のサイズを設定しない場合、全体の親要素に浮かんでは親要素を軟化することができない、親要素が浮いをクリアする必要があります
  7. フロート間の合成一切の垂直マージンません

クリアフロート

  • 親上部加熱プロパティオーバーフロー:隠されました

  • プラス空のdivが、スタイルは、最後の子要素の後に彼に明確な属性:両方(推奨されません)

  • 透明フロート成熟したスタイルクラスを使用して、clearfix

    .clearfix : after,.clearfix : before {content : '';display : table;}
    .clearfix : after {clear : both ;}
    .clearfix {zoom :1 ;}

    浮動使いクリア:

    .con2{.... overflow : hidden}
    或者
    <div class='con2' clearfix>
    
    </div>

おすすめ

転載: www.cnblogs.com/i969639/p/11201144.html