float 学習ノート_html/css_WEB-ITnose

floatシステムの学習

• floatの本来の機能はテキストラッピング効果を生成することです
• floatはラッピング、分離効果(BFC)、破壊性を生成することができます

ラッピングプロパティを持つその他の属性

display ： inline-block table-cellposition: absolute/fixed/sticky???overflow: hidden/scroll

破壊とはプロパティ

父元素的高度塌陷

その他の破壊的な属性

display: noneposition: absolute/fixed/sticky

float のクリア (float 要素の親要素に配置)

• clear
• bfc

clearfix code

.clearfix:after {    content: '';    display: block;    height: 0,    overflow: hidden;    clea    r: both;}.clearfix {     *zoom:1}/*兼容IE6、7*//****************方式二*******************/.clearfix:after {    content: '';    display: table;    clear: both;}.clearfix {    zoom:1;}

BFC

float: left/rightposition: absolute/fixedoverflow: hidden/scrolldisplay: inline-block/tabel-cellwidth/height/zoom:1(*IE6/IE7*)

フロートを使用してスペースを削除できます要素間

' ';''' ';は通常のテキストとして表示されるため、スペースがレイアウトに影響を与える可能性があります

フローティングで流動的なレイアウト

? ? ?ハイエンド

float

display: inline-block