一. 浮动的性质
1. 脱标
无论是块级元素还是行内元素,一旦浮动了,就脱离标准流了,就可以设置宽和高了。
下面事例是两个div,其中第一个div浮动了。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box1 { 12 200px; 13 height: 200px; 14 background-color: red; 15 float: left; 16 } 17 .box2 { 18 400px; 19 height: 400px; 20 background-color: pink; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="box1"> 26 </div> 27 <div class="box2"> 28 </div> 29 </body> 30 </html>
2. 浮动的元素相互贴靠
3. 浮动的元素有字围效果
二. 清除浮动的方法
清除浮动的目的:让父元素有高度,而且能随着儿子的高度来自适应,并且不让下面的同级元素占了自己的位置。
未清除浮动的案例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 li { 12 100px; 13 height: 40px; 14 background-color: pink; 15 float: left; 16 } 17 .box1 { 18 700px; 19 border: 1px solid black; 20 } 21 .box2 { 22 700px; 23 border: 1px solid black; 24 } 25 </style> 26 </head> 27 <body> 28 <!--结果第二个div里li去贴第一个div里的li了 且第一个div没有高度--> 29 <div class="box1"> 30 <ul> 31 <li>我是小如</li> 32 <li>我是小如</li> 33 <li>我是小如</li> 34 <li>我是小如</li> 35 </ul> 36 </div> 37 <div class="box2"> 38 <ul> 39 <li>我是马小如</li> 40 <li>我是马小如</li> 41 <li>我是马小如</li> 42 <li>我是马小如</li> 43 <li>我是马小如</li> 44 </ul> 45 </div> 46 </body> 47 </html>
清除浮动方法一:加高法
给浮动的父元素加个高度,就可以关住浮动的元素了,但是实际工作中根本不可能这么用,不但麻烦,而且也不合理,该方法仅仅是为了帮助理解清除浮动的原理。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 li { 8 100px; 9 height: 40px; 10 background-color: pink; 11 float: left; 12 } 13 .box1{ 14 height: 50px; 15 } 16 </style> 17 </head> 18 <body> 19 <!--清除浮动方法一:给父亲加高度--> 20 <div class="box1"> 21 <ul> 22 <li>我是小如</li> 23 <li>我是小如</li> 24 <li>我是小如</li> 25 <li>我是小如</li> 26 <li>我是小如</li> 27 </ul> 28 </div> 29 <div> 30 <ul> 31 <li>我是马小如</li> 32 <li>我是马小如</li> 33 <li>我是马小如</li> 34 <li>我是马小如</li> 35 <li>我是马小如</li> 36 </ul> 37 </div> 38 </body> 39 </html>
清除浮动方法二:给下面的父盒子加 clear:both
clear:both法,表示自己内部的元素不受其他元素影响,但该方法有个弊端,就是margin失效。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 li { 8 100px; 9 height: 40px; 10 background-color: pink; 11 float: left; 12 } 13 .box2{ 14 clear: both; /*清除别人对我的影响*/ 15 margin-top: 40px; /*此种方法 margin失效*/ 16 } 17 </style> 18 </head> 19 <body> 20 <!--清除浮动方法二:clear:both--> 21 <div> 22 <ul> 23 <li>我是小如</li> 24 <li>我是小如</li> 25 <li>我是小如</li> 26 <li>我是小如</li> 27 <li>我是小如</li> 28 </ul> 29 </div> 30 <div class="box2"> 31 <ul> 32 <li>我是马小如</li> 33 <li>我是马小如</li> 34 <li>我是马小如</li> 35 <li>我是马小如</li> 36 <li>我是马小如</li> 37 </ul> 38 </div> 39 </body> 40 </html>
清除浮动方法三:隔墙法
隔墙法,在两部分浮动元素之间加一堵墙,使其相互不影响,但该方法依旧有缺陷,就是父元素依旧没有高度,不能随子元素的高度来自适应。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 li { 12 100px; 13 height: 40px; 14 background-color: pink; 15 float: left; 16 } 17 .cl { 18 clear: both; 19 } 20 .h10{ 21 height: 10px; 22 } 23 </style> 24 </head> 25 <body> 26 <!--清除浮动方法三:隔墙法 缺点第一个div还是没有高度,不能根据子元素的高度自动适应高度--> 27 <div> 28 <ul> 29 <li>我是小如</li> 30 <li>我是小如</li> 31 <li>我是小如</li> 32 <li>我是小如</li> 33 <li>我是小如</li> 34 </ul> 35 </div> 36 <div class="cl h10"></div> 37 <div> 38 <ul> 39 <li>我是马小如</li> 40 <li>我是马小如</li> 41 <li>我是马小如</li> 42 <li>我是马小如</li> 43 <li>我是马小如</li> 44 </ul> 45 </div> 46 </body> 47 </html>
清除浮动方法四:内墙法
内墙法,在前一部分浮动元素中加一堵墙,可以使该部分的父亲撑出高度,而且能根据子元素来自适应高度。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 li { 13 100px; 14 height: 40px; 15 background-color: pink; 16 float: left; 17 } 18 .cl { 19 clear: both; 20 } 21 .h10{ 22 height: 10px; 23 } 24 /*内墙法案例一*/ 25 .p1{ 26 float: left; 27 50px; 28 height: 300px; 29 background-color: green; 30 } 31 .p2{ 32 float: left; 33 60px; 34 height: 230px; 35 background-color: yellow; 36 } 37 .p3{ 38 float: left; 39 60px; 40 height: 140px; 41 background-color: greenyellow; 42 } 43 .box1{ 44 border: 2px dashed black; 45 } 46 47 </style> 48 </head> 49 50 <body> 51 <!--清除浮动方法三:内墙法 本质:给没有高的父亲撑出高来--> 52 <div> 53 <ul> 54 <li>我是小如</li> 55 <li>我是小如</li> 56 <li>我是小如</li> 57 <li>我是小如</li> 58 <li>我是小如</li> 59 </ul> 60 <div class="cl h10"></div> 61 </div> 62 <div class="cl"> 63 <ul> 64 <li>我是马小如</li> 65 <li>我是马小如</li> 66 <li>我是马小如</li> 67 <li>我是马小如</li> 68 <li>我是马小如</li> 69 </ul> 70 <div class="cl"></div> 71 </div> 72 <!--内墙法案例一 没有高的box1盒子撑出来高--> 73 <div class="box1"> 74 <p class="p1"></p> 75 <p class="p2"></p> 76 <p class="p3"></p> 77 <div class="cl"></div> 78 </div> 79 </body> 80 </html>
清除浮动方法五:overflow:hidden
该方法是overflow的一个特性,并非本意,该方法能让浮动的盒子被儿子撑出来高度,而且margin是有效的。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 li { 12 100px; 13 height: 40px; 14 background-color: pink; 15 float: left; 16 } 17 .box1{ 18 overflow: hidden; 19 margin-bottom: 5px; 20 } 21 </style> 22 </head> 23 <body> 24 <!--清除浮动方法四:overflow: hidden 这个父亲就能够被浮动的儿子撑出高度了 能让margin生效--> 25 <div class="box1"> 26 <ul> 27 <li>我是小如</li> 28 <li>我是小如</li> 29 <li>我是小如</li> 30 <li>我是小如</li> 31 <li>我是小如</li> 32 </ul> 33 </div> 34 <div> 35 <ul> 36 <li>我是马小如</li> 37 <li>我是马小如</li> 38 <li>我是马小如</li> 39 <li>我是马小如</li> 40 <li>我是马小如</li> 41 </ul> 42 </div> 43 </body> 44 45 </html>
清除浮动方法六:双伪元素法(重点)
该方法用的十分广泛,京东网站清除浮动用的就是该方法,建议把相应代码封装到基础css文件中,项目中直接引用即可。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 li { 12 100px; 13 height: 60px; 14 background-color: pink; 15 float: left; 16 } 17 .box { 18 border: 1px solid black; 19 } 20 /*双伪元素法*/ 21 .clearfix:before, 22 .clearfix:after { 23 display: table; 24 content: ""; 25 } 26 .clearfix:after { 27 clear: both; 28 } 29 .clearfix { 30 zoom: 1; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="box clearfix"> 36 <ul> 37 <li>我是小如</li> 38 <li>我是小如</li> 39 <li>我是小如</li> 40 <li>我是小如</li> 41 <li>我是小如</li> 42 </ul> 43 </div> 44 <div class="box clearfix"> 45 <ul> 46 <li>我是马小如</li> 47 <li>我是马小如</li> 48 <li>我是马小如</li> 49 <li>我是马小如</li> 50 <li>我是马小如</li> 51 </ul> 52 </div> 53 </body> 54 </html>
清除浮动方法七:伪元素法(重点)
该方法同双伪元素法一样,用的十分广泛,小米清除浮动用的就是该方法,建议把相应代码封装到基础css文件中,项目中直接引用即可。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 li { 12 100px; 13 height: 60px; 14 background-color: pink; 15 float: left; 16 } 17 .box { 18 border: 1px solid black; 19 } 20 /*伪元素法*/ 21 .clearfix:after { 22 content: ""; 23 visibility: hidden; 24 display: block; 25 height: 0; 26 clear: both; 27 } 28 .clearfix { 29 zoom: 1; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="box clearfix"> 35 <ul> 36 <li>我是小如</li> 37 <li>我是小如</li> 38 <li>我是小如</li> 39 <li>我是小如</li> 40 <li>我是小如</li> 41 </ul> 42 </div> 43 <div class="box clearfix"> 44 <ul> 45 <li>我是马小如</li> 46 <li>我是马小如</li> 47 <li>我是马小如</li> 48 <li>我是马小如</li> 49 <li>我是马小如</li> 50 </ul> 51 </div> 52 </body> 53 </html>