浮动的清除
1 清除浮动的原因
浮动不清楚 对周围的元素布局造成影响，浮动的元素也不能撑开父亲
2 清除浮动的方案
i 给浮动元素所在父盒子增加高度,关住浮动，但是一般工程上，我们不对父盒子I设置高度，父盒子高度由儿子撑开
ii clear:both
清除左右浮动的影响，浮动元素所在父盒子没有设置高度，可以由儿子撑开
iii overflow:hidden
可以通过触发BFC的方式，实现清除浮动效果
iv 利用after伪元素
v 双伪元素
01为什么清除浮动.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap1 { width: 600px; background-color: green; } .wrap1 .son1 { width: 150px; height: 100px; background-color: pink; float: left; } .wrap1 .son2 { width: 280px; height: 100px; background-color: skyblue; float: left; } .wrap2 { width: 680px; height: 300px; background-color: purple; } </style> </head> <body> <div class="wrap1"> <div class="son1"></div> <div class="son2"></div> </div> <div class="wrap2"></div> </body> </html>
02清除浮动-给父亲增加高度.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap1 { width: 600px; height: 100px; background-color: green; } .wrap1 .son1 { width: 150px; height: 100px; background-color: pink; float: left; } .wrap1 .son2 { width: 280px; height: 100px; background-color: skyblue; float: left; } .wrap2 { width: 680px; height: 300px; background-color: purple; } </style> </head> <body> <div class="wrap1"> <div class="son1"></div> <div class="son2"></div> </div> <div class="wrap2"></div> </body> </html>
03清除浮动-clear属性.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap1 { width: 600px; background-color: green; } .wrap1 .son1 { width: 150px; height: 100px; background-color: pink; float: left; } .wrap1 .son2 { width: 280px; height: 100px; background-color: skyblue; float: left; } .wrap2 { width: 680px; height: 300px; background-color: purple; } .clear { clear: both; /*清除浮动 */ } </style> </head> <body> <div class="wrap1"> <div class="son1"></div> <div class="son2"></div> <div class="clear"></div> </div> <div class="wrap2"></div> </body> </html>
04清除浮动-overflow.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap1 { width: 600px; background-color: green; overflow: hidden; } .wrap1 .son1 { width: 150px; height: 100px; background-color: pink; float: left; } .wrap1 .son2 { width: 280px; height: 100px; background-color: skyblue; float: left; } .wrap2 { width: 680px; height: 300px; background-color: purple; } </style> </head> <body> <div class="wrap1"> <div class="son1"></div> <div class="son2"></div> </div> <div class="wrap2"></div> </body> </html>
05清除浮动-利用伪元素.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap1 { width: 600px; background-color: green; } .wrap1 .son1 { width: 150px; height: 100px; background-color: pink; float: left; } .wrap1 .son2 { width: 280px; height: 100px; background-color: skyblue; float: left; } .wrap2 { width: 680px; height: 300px; background-color: purple; } /*伪元素产出的是行内元素*/ .clearfix::after { content: "."; /*尽量加不要空 */ display: block; /*转块元素*/ clear: both; /*清除浮动*/ height: 0; /*高度为0*/ visibility: hidden;/*隐藏盒子*/ } .clearfix { *zoom: 1; /* zoom是ie6 7 清除浮动用的属性 *表示该属性只有ie6 7 识别 */ } </style> </head> <body> <div class="wrap1 clearfix"> <div class="son1"></div> <div class="son2"></div> </div> <div class="wrap2"></div> </body> </html>
06清除浮动元素-双伪元素.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap1 { width: 600px; background-color: green; } .wrap1 .son1 { width: 150px; height: 100px; background-color: pink; float: left; } .wrap1 .son2 { width: 280px; height: 100px; background-color: skyblue; float: left; } .wrap2 { width: 680px; height: 300px; background-color: purple; } /* 推荐使用 代码简洁*/ .clearfix:before, .clearfix:after { content: ""; display: table; /* 触发BFC BFC可以清除浮动*/ } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .wrap2:after { content: "abc"; } </style> </head> <body> <div class="wrap1 clearfix"> <div class="son1"></div> <div class="son2"></div> </div> <div class="wrap2"></div> </body> </html>
