CSS之浮動float

浮動

1.1 浮動的元素

在CSS中，浮動通過float屬性實現。

取值： left | right | none
初始值：none
適用於：所有元素

浮動的元素會脫離常規文檔流，但是，仍會對常規文檔流的佈局有所影響。使用浮動的一個獨特之處就是：浮動的元素處於單獨的平面上，但是對文檔中的其他內容仍會有影響。
之所以這樣是因爲，對於文檔中浮動的元素，其他內容會圍繞浮動的元素流動。

可以看到，最後一個段落的內容圍繞浮動元素流動。

注意：浮動元素的外邊距不會發生摺疊。對於非置換元素，要設置其width值。否則，元素的寬度爲僅僅可容納文本的大小.

div {
			/*width:500px;*/
			height:300px;
			border:1px solid red;
			margin:auto;
			float:right;
		}
	<div>
	<p>計算機科學</p>
	</div>

1.2 浮動詳解

深入瞭解浮動之前，要理解容納塊的概念。浮動元素的容納塊即爲浮動元素的最近塊級祖元素。此外，不論什麼類型的標籤，設置爲浮動後，均爲塊級標籤。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div {
			width:500px;
			height:500px;
			border:1px solid red;
			margin:auto;
			/*float:right;*/
		}
		.float {
			float: right;
			border:1px solid blue;
			width:100px;
			height:100px;
			line-height: 50px;
		}
	</style>
</head>
<body>
		<div>
			<p>計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學計算機科學與技術與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術</p>
			<!-- <p>計算機科學</p> -->
			<p >計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學計算機科學與技術與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術</p>
			<span class="float">12455666</span>
			<p>計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學計算機科學與技術與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術</p>
		</div>
</body>
</html>

正常來說，span作爲行內標籤，對其設置width和height會無效，但是設置爲浮動後卻有效果，因此證明了其爲塊級元素。

浮動元素的位置有一系列的規則約束，下面爲簡單幾個：

浮動元素的左（右）外邊界不能超過容納塊的左（右）內邊界。

所有的元素正常情況下，均是位於父元素盒模型中的content中。畢竟子元素也是父元素的內容嘛。
爲避免浮動元素的互相遮蓋，若一個向左浮動元素的左邊已存在一個浮動元素，那麼該浮動元素將僅靠左邊浮動元素的右外邊界。右邊同理。反之，若一個浮動元素的浮動方向一側無其他浮動元素，則該浮動元素僅靠容納塊的相應的內邊界。
左浮動元素的由外邊界不能在有浮動元素左外邊界的右側。右浮動元素的左外邊界不能在左浮動元素右外邊距的左側。
浮動元素的頂邊不能超過父元素的內頂邊高。如果浮動元素在兩個摺疊外邊距之間，那麼在兩個元素之間放置它的位置時，將視其有個塊級父元素
仍以上面的例子：當我們把浮動元素p放在兩個p元素之間時，由於浮動元素位於兩個摺疊外邊距之間，因此將視其有個塊級父元素。這是爲了避免浮動元素一直往上移動
浮動元素的頂邊不能超過前面的任何一個浮動元素或塊級元素。
避免浮動元素一直往上移動超出父元素的頂邊
浮動元素的頂邊不能高於文檔源碼中出現在浮動元素之前的元素生成的框體所在的行框頂邊。
進一步限制浮動元素的上移

<html>
<head>
  <title></title>
  <style type="text/css">
  	* {
  		margin:0;
  		padding:0;
  	}
  	div {
  		width:500px;
  		height:500px;
  		border:1px solid red;
  		margin:auto;
  		/*float:right;*/
  	}
  	.float {
  		float: right;
  		border:1px solid blue;
  		width:100px;
  		height:100px;
  		line-height: 50px;
  		display:auto;
  		/*margin-top:100px;*/
  	}
  </style>
</head>
<body>
  	<div>
  		<p>計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與<span class="float">12455666</span>技術計算機科學計算機科學與技術與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術計算機科學與技術</p>
  	</div>
</body>
</html>

可以看到，位於段落中的span設置爲浮動後，頂邊並沒有超過他所在的那一行的行框。

在CSS中，對於每一行文本，均會生成一個行框，其高度主要受line-height的影響。

浮動元素不會超出容納塊的邊界，除非浮動元素太寬，容納元素放不下。若兩個浮動元素排布在一起會超過邊界，則會發生“換行”。

1.3 浮動元素與內容摺疊

CSS規定：

行內框與浮動元素重疊時，其邊框、背景與內容都在浮動元素“之上”渲染

塊級框與浮動元素重疊時，其邊框、背景在浮動元素“之後”渲染，其內容在浮動元素“之上”渲染。

.image {
			width: 50px;
			height: 200px;
			float: left;
			margin:10px -15px 10px 10px;
		}
		p {
			width:400px;
			background: pink;
			border:1px solid black;
			padding:.5em;
		}
		span {
			background: blue;
			border:3px double green;
			padding:2px;
		}
		
<img src="C:\Users\lenovo\Desktop\bai.jpg" class="image">
		<p>計算機科學與術計算機科學與技術計算機科學與技術計算機科與技術計算機科學與技術<span>1212896124873</span>計算機科學與技術計算機科學與技術計算機科學與技術計算機科與技術</p>

可以看到，行內元素和塊級元素與浮動元素的排布正如上面所述。

2. 清除浮動

clear
取值：left | right | both | none
初始值： none

p {  clear:left; }

這個樣式規則可以理解爲：確保p的左邊遠離浮動圖像，同理right 和both分別指右邊、兩邊遠離浮動圖像。
仍以上面的爲例：

p {
			width:400px;
			background: pink;
			border:1px solid black;
			padding:.5em;
			clear:left;
		}

清除浮動原理
清除浮動時，會給設置清除浮動的元素的上方增加間距，從而使元素向下移動。但是，清除浮動的元素的外邊距不會發生變化。間距就是爲了使元素下移，確保顯示在浮動元素的下方而在元素上外邊距外增加的一塊空白。

時刻要注意：浮動框的邊界由浮動元素的外邊距的邊界劃定。（記住CSS盒模型）

3. 定義形狀

3.1 定義形狀

CSS可以設置浮動元素周圍的內容的流動形狀。

shape-outside
取值： none | [< basic-shape> || < shape-box>] | < image>

< basic-shape> 和 < shape-box>的類型如下：
basic-shape：

inset()
circle()
ellipse()
polygon()

shape-box:

margin-box
border-box
padding-box
content-box
默認使用外邊距框。
對於basic-shape而言，需要四個參數，分別對應浮動元素的上、右、下、左。
inset(): 浮動元素各邊向內偏移的距離。內凹形狀有個特殊之處，計算內偏移時可以爲元素設置圓角。語法爲： shape-outside: { inset(10% round 5px)} 會設置一個5px的圓角。也可以是橢圓角，例如：寬爲10px 高位20px： shape-outside: { inset(10% round 10px/20px)}

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
   	* {
   		margin:0;
   		padding:0;
   	}
   	div {
   		width:500px;
   		height:300px;
   		border:1px solid red;
   		margin:auto;
   		display: inline-block;
   	}
   	.image {
   		width: 100px;
   		height: 100px;
   		float: left;
   		margin:20px;
   		shape-outside: inset(10px round 10px) content-box;
   	}
   	.image2 {
   		width: 100px;
   		height: 100px;
   		float: left;
   		margin:20px;
   		shape-outside: inset(10px round 70px/90px) content-box;
   	}
   	p {
   		width:400px;
   		background: pink;
   		border:1px solid black;
   		padding:.5em;
   		margin-top:0px;
   	}
   	span {
   		background: blue;
   		border:3px double green;
   		padding:2px;
   		
   	}
   </style>
</head>
<body>
   
   	<div>
   		<img src="C:\Users\lenovo\Desktop\bai.jpg" class="image">
   	<p>計算機科學與術計算機科學與技術計計算機科學與術計算機科學與技術計算機科學與技術計算機科算機科學與技術計算機科與技術計算機科學與技術<span>1212896124873</span>計算機科學與技術計算機科學與技術計算機科學與技術計算機科與技術</p>
   	</div>
   	<div>
   		<img src="C:\Users\lenovo\Desktop\bai.jpg" class="image2">
   	<p>計算機科學與術計算機科學與技術計算機科學與技術計算機科計算機科學與術計算機科學與技術計算機科學與技術計算機科與技術計算機科學與技術<span>1212896124873</span>計算機科學與技術計算機科學與技術計算機科學與技術計算機科與技術</p>
   	</div>
   	

</body>
</html>

circle() 和 ellipse()
在circle()中，要定義一個半徑，和中心點的位置（默認爲center）
可以有的取值有以下：
1. circle(10px)
2. circle(10px at center)
3. circlr(10em at 30% 50%)
4. circle(closest-side at top left) (closest-side\farthest-side)

在ellipse()中，要定義兩個半徑（x軸、y軸）取值規則與上面的類似

多邊形polygon()
多邊形形狀由一系列逗號間隔的x-y座標定義，值可以是長度或是百分數，相對形狀框的左上角計算。

浮動

1.1 浮動的元素

1.2 浮動詳解

1.3 浮動元素與內容摺疊

2. 清除浮動

3. 定義形狀

3.1 定義形狀

lightdb hash index的性能和限制

JS數據類型判斷

重學Javascript之數據類型

重學Javascript之類型轉換

React組件理解

CSS樣式之實現水平排列塊元素的幾種方式

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結