css如何設定浮動
- 醉折花枝作酒筹原創
- 2021-04-21 10:40:408664瀏覽
在css中，可以使用float屬性設定浮動，只需要給元素設定「float:left|right|none」；其中left表示向左浮動，right表示向右浮動，none表示元素不浮動，並會顯示在文字中出現的位置。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中可以透過float屬性來設定浮動。 float屬性定義元素在哪個方向浮動。以往這個屬性總是應用於圖像，使文字圍繞在圖像周圍，不過在CSS 中，任何元素都可以浮動。浮動元素會產生一個區塊級框，而不論它本身是何種元素。
float屬性：
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
註解：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
float屬性可能的值：
left 元素向左浮動。
right 元素向右浮動。
none 預設值。元素不浮動，並會顯示在文字中出現的位置。
css設定浮動範例：
<html>
<head>
<style type="text/css">
img
{
float:right
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="猫/images/1.jpg" style="max-width:90%"/ alt="css如何設定浮動" >
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
</p>
</body>
</html>執行結果：
浮動的方塊可以向左或向右移動，直到它的外緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的區塊框表現得就像浮動框不存在一樣。
浮動的好處當然是佈局了，例如透過浮動來形成三列佈局，文字環繞等等。但是浮動也有一個問題，那就是會導致高度的塌陷，就像上面的圖片顯示，父元素的高度塌陷了，並沒有將浮動的子元素包裹進去，這樣子就會造成佈局上的錯誤。
推薦學習：css影片教學
#以上是css如何設定浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn