css3浮動是什麼意思-前端問答-PHP中文網

首頁

web前端

前端問答

css3浮動是什麼意思

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 20, 2022 pm 04:04 PM

css

css3浮動指的是元素會脫離文件的普通流，根據float的值向左或向右移動，直到外邊界碰到父元素的內邊界或另一個浮動元素的外邊界為止；浮動會使元素向左或向右移動，其周圍的元素也會重新排列。

css3浮動是什麼意思

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

css3浮動是什麼意思

所謂css浮動就是浮動元素會脫離文件的普通流，根據float的值向左或向右移動，直到它的外邊界碰到父元素的內邊界或另一個浮動元素的外邊界為止。

假如A元素浮動了，原本排在該元素之後的元素發現A元素不在這個文檔流了，就會無視它往上接到A元素前面的元素之後(PS:但是文字並不會無視它，也會環繞A元素，也就是A元素沒有脫離文字流。

css3浮動是什麼意思

#CSS 的Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。Float（浮動），往往是用於圖像，但它在佈局時一樣非常有用。

使用float 脫離文檔流時, 其他盒子會無視這個元素,但其他盒子內的文本依然會為這個元素讓出位置, 環繞在周圍(可以說是部分無視)。

由於浮動框不在文檔的普通流中,所以文檔的普通流中的塊級元素表現得就像浮動元素不存在一樣。

而對於使用position:absolute 脫離文檔流的元素, 其他盒子與其他盒子內的文本都會無視它。

元素浮動：

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之後的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果圖像是右浮動，下面的文字流將環繞在它左邊：

#範例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<style>
img 
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img  src="/static/imghwm/default1.png"  data-src="logocss.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="css3浮動是什麼意思" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>

效果圖：

css3浮動是什麼意思