什么是浮動
float屬性用于創(chuàng)建浮動框给僵,將其移動到一邊烙无,直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣锋谐。浮動相當于又增加了一層,新增加的一層是飛起來的截酷,所以會脫離標準流涮拗。
語法
選擇器{ float:屬性值;}
屬性值描述
none元素不浮動
left元素左浮動
right元素右浮動
浮動特性
加了浮動之后的元素,會具有很多特性,需要我們掌握的。
1.浮動元素會脫離標準流(脫標)
2.浮動的元素會一行內(nèi)顯示并且元素頂部對齊
3.浮動的元素會具有行內(nèi)塊元素的特性
?脫標
設置浮動(float)的元素最重要的的特性:
[if !supportLists]1.????[endif]脫離標準普通流的控制(浮)移動到指定位置(動)多搀,俗稱脫標歧蕉。
[if !supportLists]2.????[endif]浮動的盒子不再保留原先的位置。
浮動盒子一行顯示
如果多個盒子都設置了浮動康铭,則它們會按照屬性值一行內(nèi)顯示并且頂端對齊排列惯退。
注意∶浮動的元素是互相貼靠在一起的(不會有縫隙),如果父級寬度裝不下這些浮動的盒子从藤,多出的盒子會另起一行對齊催跪。
浮動元素具有行內(nèi)塊特性
任何元素都可以浮動。不管原先是什么模式的元素(塊級元素夷野,行內(nèi)元素)懊蒸,添加浮動之后具有行內(nèi)塊元素相似的特性。
如果塊級盒子沒有設置寬度悯搔,默認寬度和父級一樣寬骑丸,但是添加浮動后,它的大小根據(jù)內(nèi)容來決定
浮動的盒子中間是沒有縫隙的妒貌,是緊換著一起的
行內(nèi)元素同理通危,可以設置高度和寬度。
浮動元素標準流經(jīng)常和標準流父親搭配使用
為了約束浮動元素位置灌曙,網(wǎng)頁布局一般采取的策略是:
先用標準流的父親元素排列上下位置菊碟,之后內(nèi)部子元素采取浮動排列左右位置,符合網(wǎng)頁布局第一準則
網(wǎng)頁布局第二準則:先設置盒子大小在刺,再設置盒子的位置逆害。
浮動布局注意點
1.浮動和標準流的父盒子搭配。
先用標準流的父元素排列上下位置,之后內(nèi)部子元素采取浮動排列左右位置
2.一個元素浮動了蚣驼,理論上其余的兄弟元素也要浮動魄幕。
一個盒子里面有多個子盒子,如果其中一個盒子浮動了颖杏,那么其他兄弟也應該浮動纯陨,以防止引起問題。浮動的盒子只會影響浮動盒子后面的標準流不會影響前面的標準流.