文檔流
文檔流,是指盒子按照html標(biāo)簽編寫的順序依次從上到下,從左到右排列,塊元素占一行,行內(nèi)元素在一行之內(nèi)從左到右排列,先寫的先排列,后寫的排在后面,每個盒子都占據(jù)自己的位置。
浮動特性
1、浮動元素有左浮動(float:left)和右浮動(float:right)兩種
2、浮動的元素會向左或向右浮動,碰到父元素邊界、浮動元素、未浮動的元素才停下來
3、相鄰浮動的塊元素可以并在一行,超出父級寬度就換行
4、浮動讓行內(nèi)元素或塊元素自動轉(zhuǎn)化為行內(nèi)塊元素
5、浮動元素后面沒有浮動的元素會占據(jù)浮動元素的位置,沒有浮動的元素內(nèi)的文字會避開浮動的元素,形成文字饒圖的效果
6、父元素內(nèi)整體浮動的元素?zé)o法撐開父元素,需要清除浮動
7、浮動元素之間沒有垂直margin的合并
清除浮動
父級上增加屬性overflow:hidden
在最后一個子元素的后面加一個空的div,給它樣式屬性 clear:both(不推薦)
使用成熟的清浮動樣式類,clearfix