在css中,浮動是一種使元素脫離文檔流的方法,會使元素根據(jù)float的值向左或向右移動,其周圍的元素也會重新排列,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
浮動是一種使元素脫離文檔流的方法,會使元素向左或向右移動,其周圍的元素也會重新排列。
浮動的意義:設(shè)置了浮動屬性的元素會脫離普通標(biāo)準(zhǔn)流的控制,移動到其父元素中指定的位置的過程,將塊級元素放在一行,浮動會脫離標(biāo)準(zhǔn)流,不占位置,會影響標(biāo)準(zhǔn)流,浮動只有左右浮動,不會出現(xiàn)上下浮動。
浮動是一種非常有用的布局方式,它能夠改變頁面中對象的前后流動順序。這樣做的好處是,使得內(nèi)容的排版變的簡單,具有良好的伸縮性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> img { float:right; } </style> </head> <body> <p>在下面的段落中,我們添加了一個 <b>float:right</b> 的圖片。導(dǎo)致圖片將會浮動在段落的右邊。</p> <p> <img src="logocss.gif" width="95" height="84" /> 這是一些文本。這是一些文本。這是一些文本。 這是一些文本。這是一些文本。這是一些文本。 這是一些文本。這是一些文本。這是一些文本。 這是一些文本。這是一些文本。這是一些文本。 這是一些文本。這是一些文本。這是一些文本。 這是一些文本。這是一些文本。這是一些文本。 這是一些文本。這是一些文本。這是一些文本。 這是一些文本。這是一些文本。這是一些文本。 這是一些文本。這是一些文本。這是一些文本。 這是一些文本。這是一些文本。這是一些文本。 </p> </body> </html>
(學(xué)習(xí)視頻分享:css視頻教程)
元素浮動的特性:
1、浮動的元素脫離了標(biāo)準(zhǔn)文檔流,擺脫塊級元素和行內(nèi)元素的限制
2、浮動的元素存在相互貼靠的效果,當(dāng)寬度不夠的時候,會出現(xiàn)自動換行
3、浮動的元素雖然脫離了標(biāo)準(zhǔn)文檔流,但是沒有脫離文本流,會出現(xiàn)被字包圍的效果
浮動導(dǎo)致的后果:
(1)由于浮動元素脫離了文檔流,所以父元素的高度無法被撐開,影響了與父元素同級的元素
(2)與浮動元素同級的非浮動元素會跟隨其后,因為浮動元素脫離文檔流不占據(jù)原來的位置
(3)如果該浮動元素不是第一個浮動元素,則該元素之前的元素也需要浮動,否則容易影響頁面的結(jié)構(gòu)顯示
因此需要清除浮動。那么如何清除浮動?推薦閱讀《CSS如何清除浮動?3種方法介紹》