浮動定位指：
- 將元素排除在普通流之外
- 元素將不再頁面中占據空間
- 將浮動元素放置在包含框的左邊或者右邊
- 浮動元素依舊位于包含框之內
浮動的框可以向左或者向右移動直到他的外邊緣碰到包含框或另一個浮動框的邊框為止
浮動元素的外邊緣不會超過其父元素的內邊緣
浮動元素不會重疊
浮動元素不會上下浮動
任何元素一旦浮動，display屬性將完全失效均可以設定寬高，并且不會獨占一行
浮動語法：float：none/left/right
設定三個div，顏色分別為藍黃綠，代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮動</title> 6 <style> 7 #box{ 8 width: 600px; 9 height: 600px; 10 background: red; 11 } 12 #box>div{ 13 width: 200px; 14 height:200px; 15 } 16 #box>div:first-child{ 17 background: blue; 18 } 19 #box>div:nth-child(2){ 20 background: yellow; 21 } 22 #box>div:nth-child(3){ 23 background: green; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="box"> 29 <div></div> 30 <div></div> 31 <div></div> 32 </div> 33 </body> 34 </html>
這里先將第一個div左浮動一下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮動</title> 6 <style> 7 #box{ 8 width: 600px; 9 height: 600px; 10 background: red; 11 } 12 #box>div{ 13 width: 200px; 14 height:200px; 15 } 16 #box>div:first-child{ 17 background: blue; 18 /*左浮動*/ 19 float: left; 20 } 21 #box>div:nth-child(2){ 22 background: yellow; 23 } 24 #box>div:nth-child(3){ 25 background: green; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="box"> 31 <div></div> 32 <div></div> 33 <div></div> 34 </div> 35 </body> 36 </html>
第一個藍色div左浮動之后，覆寫了第二個黃色div，這是因為浮動后的元素將不在頁面中占據空間
第一個div右浮動：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮動</title> 6 <style> 7 #box{ 8 width: 600px; 9 height: 600px; 10 background: red; 11 } 12 #box>div{ 13 width: 200px; 14 height:200px; 15 } 16 #box>div:first-child{ 17 background: blue; 18 /*右浮動*/ 19 float: right; 20 } 21 #box>div:nth-child(2){ 22 background: yellow; 23 } 24 #box>div:nth-child(3){ 25 background: green; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="box"> 31 <div></div> 32 <div></div> 33 <div></div> 34 </div> 35 </body> 36 </html>
可以看到浮動的藍色div停靠在父元素的右邊緣，因為浮動元素的外邊緣不會超過父元素的內邊緣
當我們浮動以后如果它原有的空間不夠，會自動跑到下一行來：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮動</title> 6 <style> 7 #box{ 8 width: 600px; 9 height: 600px; 10 background: red; 11 } 12 #box>div{ 13 width: 200px; 14 height:200px; 15 } 16 #box>div:first-child{ 17 background: blue; 18 float: right; 19 } 20 #box>div:nth-child(2){ 21 background: yellow; 22 float: right; 23 } 24 #box>div:nth-child(3){ 25 width: 300px; 26 height: 300px; 27 background: green; 28 float: right; 29 } 30 </style> 31 </head> 32 <body> 33 <div id="box"> 34 <div></div> 35 <div></div> 36 <div></div> 37 </div> 38 </body> 39 </html>
如果父元素不設定寬高，父元素內的子元素全部浮動的話（浮動將元素排除在普通流之外）那么父元素就感受不到子元素的高度
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮動</title> 6 <style> 7 #box{ 8 background: red; 9 } 10 #box>div{ 11 width: 200px; 12 height:200px; 13 } 14 #box>div:first-child{ 15 background: blue; 16 float: right; 17 } 18 #box>div:nth-child(2){ 19 background: yellow; 20 float: right; 21 } 22 #box>div:nth-child(3){ 23 background: green; 24 float: right; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="box"> 30 <div></div> 31 <div></div> 32 <div></div> 33 </div> 34 </body> 35 </html>
解決方法一：設定父元素的寬高
方法二：overflow: hidden;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮動</title> 6 <style> 7 #box{ 8 background: red; 9 /*在不設定寬高的情況下，讓父元素可以感知到子元素的高度*/ 10 overflow: hidden; 11 } 12 #box>div{ 13 width: 200px; 14 height:200px; 15 } 16 #box>div:first-child{ 17 background: blue; 18 float: right; 19 } 20 #box>div:nth-child(2){ 21 background: yellow; 22 float: right; 23 } 24 #box>div:nth-child(3){ 25 background: green; 26 float: right; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="box"> 32 <div></div> 33 <div></div> 34 <div></div> 35 </div> 36 </body> 37 </html>
方法三：父元素浮動
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮動</title> 6 <style> 7 #box{ 8 background: red; 9 /*在不設定寬高的情況下，讓父元素可以感知到子元素的高度*/ 10 /*overflow: hidden;*/ 11 float: left; 12 } 13 #box>div{ 14 width: 200px; 15 height:200px; 16 } 17 #box>div:first-child{ 18 background: blue; 19 float: right; 20 } 21 #box>div:nth-child(2){ 22 background: yellow; 23 float: right; 24 } 25 #box>div:nth-child(3){ 26 background: green; 27 float: right; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="box"> 33 <div></div> 34 <div></div> 35 <div></div> 36 </div> 37 </body> 38 </html>
清除浮動：clear：left/right/both
首先定義兩個div，一個浮動，一個不浮動，正常情況，浮動的div會把不浮動的div給遮住
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>清除浮動</title> 6 <style> 7 #box{ 8 width: 400px; 9 height: 400px; 10 background: red; 11 } 12 #box>div:first-child{ 13 width: 200px; 14 height: 200px; 15 background: green; 16 float: left; 17 } 18 #box>div:nth-child(2){ 19 width: 200px; 20 height: 200px; 21 background: blue; 22 /*clear: both;*/ 23 } 24 </style> 25 </head> 26 <body> 27 <div id="box"> 28 <div></div> 29 <div></div> 30 </div> 31 </body> 32 </html>
解決方法：清除浮動
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>清除浮動</title> 6 <style> 7 #box{ 8 width: 400px; 9 height: 400px; 10 background: red; 11 } 12 #box>div:first-child{ 13 width: 200px; 14 height: 200px; 15 background: green; 16 float: left; 17 } 18 #box>div:nth-child(2){ 19 width: 200px; 20 height: 200px; 21 background: blue; 22 /*清除浮動*/ 23 clear: both; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="box"> 29 <div></div> 30 <div></div> 31 </div> 32 </body> 33 </html>
完美解決
清除浮動的常用方式
- 結尾處加空div標簽clear：both（或在下一個元素上加chear：both）
- 浮動元素的父級div定義overflow：hidden
- 浮動元素的父元素定寬高
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/204533.html
標籤：其他
上一篇：Vue3.x 從零開始（六）—— Router + Vuex + TypeScript 實戰演練（下）
下一篇：2020/11/06學習日志