ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSでBFCを再生するにはどうすればよいですか? _html/css_WEB-ITnose
CSSでBFCを再生するにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:39:411379ブラウズ
まず、BFC とは何ですか?
w3c はこのように説明しています
BFC (Block Formatting Context) は、Web ページ内のボックス モデル レイアウトの CSS レンダリング モードです。その位置付けシステムは通常のドキュメント フローに属します。
簡単に言うと、
float の値は none ではありません
Position の値は静的でも相対的でもありません
display の値は、table-cell、table-caption、inline-block、flex、または inline- のいずれかですflex
overflow の値は表示されません
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .column{ width: 31.33%; background-color: aqua; float: left; margin: 0.1%; color: #fff; padding: 10px 0; } .column:last-child{ float: none; /* overflow: hidden;*/ } </style></head><body> <div class="container"> <div class="column">11</div> <div class="column">22</div> <div class="column">33</div> </div></body></html> 上記のコードは、新しい BFC モジュールが形成されるように、overflow: hidden を追加します。
概念を理解して多くのレイアウトの下部に到達し、余白の計算方法、上下の余白を大きくする必要がある、左右の余白を大きくする必要があるなどの原則を理解します。左側にアバター、右側にテキストなどのレイアウトはどのようなものですか。
詳細については、 http://www.w3cplus.com/css/ Understanding-block-formatting-contexts-in-css.html を参照してください。
著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーによって公開されていないため、所有者の許可を得て転載することはできません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。