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