CSS浮动
浮动定位指：
- 将元素排除在普通流之外
- 元素将不再页面中占据空间
- 将浮动元素放置在包含框的左边或者右边
- 浮动元素依旧位于包含框之内
浮动的框可以向左或者向右移动直到他的外边缘碰到包含框或另一个浮动框的边框为止
浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会重叠
浮动元素不会上下浮动
任何元素一旦浮动，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
- 浮动元素的父元素定宽高
