在页面的布局中我们经常用浮动让几个盒子在一行中显示,但由于浮动的盒子会脱离文档流,从而影响下面的布局,所以我们必须清除浮动
下面总结了几种常用的清除浮动的几种方法:
- 给浮动的盒子的父元素的下一个元素加上css样式:clear: both;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>清除浮动</title> 6 <style> 7 .son1 { 8 width: 100px; 9 height: 100px; 10 background-color: pink; 11 float: left; 12 } 13 .son2 { 14 width: 100px; 15 height: 100px; 16 float: left; 17 background-color: purple; 18 } 19 .main { 20 width: 200px; 21 height: 200px; 22 background-color: black; 23 clear: both; <!---****-> 24 } 25 </style> 26 </head> 27 <body> 28 <div class="father clearfix"> 29 <div class="son1"></div> 30 <div class="son2"></div> 31 <!-- <div class="additional"></div> --> 32 </div> 33 <div class="main"></div> 34 </body> 35 </html>
- 额外标签法(W3C推荐使用):在最后一个浮动的子盒子的后面新建一个div,并给出css样式:clear: both;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>清除浮动</title> 6 <style> 7 8 .son1 { 9 width: 100px; 10 height: 100px; 11 background-color: pink; 12 float: left; 13 } 14 .son2 { 15 width: 100px; 16 height: 100px; 17 float: left; 18 background-color: purple; 19 } 20 .main { 21 width: 200px; 22 height: 200px; 23 background-color: black; 24 /*clear: both;*/ 25 } 26 .additional { 27 clear: both; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="father clearfix"> 33 <div class="son1"></div> 34 <div class="son2"></div> 35 <div class="additional"></div> 36 </div> 37 <div class="main"></div> 38 </body> 39 </html>
- overflow清除浮动:给浮动的子盒子的父亲添加css样式:overflow: hidden;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>清除浮动</title> 6 <style> 7 .father { 8 overflow: hidden; 9 } 10 .son1 { 11 width: 100px; 12 height: 100px; 13 background-color: pink; 14 float: left; 15 } 16 .son2 { 17 width: 100px; 18 height: 100px; 19 float: left; 20 background-color: purple; 21 } 22 .main { 23 width: 200px; 24 height: 200px; 25 background-color: black; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="father"> 31 <div class="son1"></div> 32 <div class="son2"></div> 33 </div> 34 <div class="main"></div> 35 </body> 36 </html>
- 伪元素清除浮动;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>清除浮动</title> 6 <style> 7 .son1 { 8 width: 100px; 9 height: 100px; 10 background-color: pink; 11 float: left; 12 } 13 .son2 { 14 width: 100px; 15 height: 100px; 16 float: left; 17 background-color: purple; 18 } 19 .main { 20 width: 200px; 21 height: 200px; 22 background-color: black; 23 /*clear: both;*/ 24 } 25 26 /*伪元素清除浮动*/ 27 /*正常浏览器识别*/ 28 .clearfix:after { 29 content: ""; 30 display: block; 31 height: 0; 32 clear: both; 33 visibility: hidden; 34 } 35 /*IE7 及以下识别*/ 36 .clearfix { 37 *zoom: 1; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="father clearfix"> 43 <div class="son1"></div> 44 <div class="son2"></div> 45 </div> 46 <div class="main"></div> 47 </body> 48 </html>
- 双伪元素清除浮动.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>清除浮动</title> 6 <style> 7 .son1 { 8 width: 100px; 9 height: 100px; 10 background-color: pink; 11 float: left; 12 } 13 .son2 { 14 width: 100px; 15 height: 100px; 16 float: left; 17 background-color: purple; 18 } 19 .main { 20 width: 200px; 21 height: 200px; 22 background-color: black; 23 /*clear: both;*/ 24 } 25 26 /*双伪元素清除浮动*/ 27 /*.clearfix:before, .clearfix:after { 28 content: ""; 29 display: table; 30 } 31 .clearfix:after { 32 clear: both; 33 } 34 .clearfix { 35 *zoom: 1; 36 }*/ 37 </style> 38 </head> 39 <body> 40 <div class="father clearfix"> 41 <div class="son1"></div> 42 <div class="son2"></div> 43 </div> 44 <div class="main"></div> 45 </body> 46 </html>
注:清除浮动后父元素都会自动检测浮动孩子的高度,从而能够撑起来,不会影响后面的布局!