首頁 > web前端 > 前端問答 > css什麼是浮動

css什麼是浮動

青灯夜游
發布: 2023-01-04 09:34:27
原創
2013 人瀏覽過

在css中,浮動是一種使元素脫離文檔流的方法,會使元素根據float的值向左或向右移動,其周圍的元素也會重新排列,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

css什麼是浮動

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

浮動是一種使元素脫離文件流的方法,會使元素向左或向右移動,其周圍的元素也會重新排列。

浮動的意義:設定了浮動屬性的元素會脫離普通標準流的控制,移動到其父元素中指定的位置的過程,將區塊級元素放在一行,浮動會脫離標準流,不佔位置,會影響標準流,浮動只有左右浮動,不會出現上下浮動。

浮動是一種非常有用的佈局方式,它能夠改變頁面中物件的前後流動順序。這樣做的好處是,使得內容的排版變的簡單,具有良好的伸縮性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
img 
{
	float:right;
}
</style>
</head>

<body>
<p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img  src="logocss.gif"    style="max-width:90%"  style="max-width:90%" / alt="css什麼是浮動" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>
登入後複製

css什麼是浮動

(學習影片分享:css影片教學

元素浮動的特性:

1、浮動的元素脫離了標準文檔流,擺脫塊級元素和行內元素的限制

#2、浮動的元素存在相互貼靠的效果,當寬度不夠的時候,會出現自動換行

3、浮動的元素雖然脫離了標準文檔流,但是沒有脫離文字流,會出現被字包圍的效果

浮動導致的後果:

(1)由於浮動元素脫離了文檔流,所以父元素的高度無法被撐開,影響了與父元素同級的元素

(2)與浮動元素同級的非浮動元素會跟隨其後,因為浮動元素脫離文檔流不佔據原來的位置

(3)如果該浮動元素不是第一個浮動元素,則該元素之前的元素也需要浮動,否則容易影響頁面的結構顯示

因此需要清除浮動。那麼如何清除浮動?推薦閱讀《CSS如何清除浮動? 3種方法介紹

更多程式相關知識,請造訪:程式設計影片! !

以上是css什麼是浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板