浮動元素有左浮動(float:left)和右浮動(float:right)兩種
浮動的元素會向左或向右浮動,碰到父元素邊界、其他元素才停下來
相鄰浮動的塊元素可以並在一行,超出父級寬度就換行
浮動讓行內元素或塊元素自動轉化為行內塊元素(此時不會有行內塊元素間隙問題)
浮動元素後面沒有浮動的元素會占據浮動元素的位置,沒有浮動 的元素內的文字會避開浮動的元素,形成文字饒圖的效果
父元素如果沒有設置尺寸(一般是高度不設置),父元素內整體浮動的元素無法撐開父元素,父元素需要清除浮動
浮動元素之間沒有垂直margin的合並
父級上增加屬性overflow:hidden
在最後一個子元素的後面加一個空的div,給它樣式屬性 clear:both(不推薦)
使用成熟的清浮動樣式類,將clearfix添加到浮動元素的父級元素中
? 1 2 3 4 5 6 7 8 9 10 11 12 13 .clearfix:after, .clearfix:before{ content: ''; display: table; } .clearfix:after{ clear: both; } .clearfix{ /*兼容低版本的IE浏覽器*/ zoom: 1; }