清除浮动
前言
为什么要清除浮动？
浮动不占用原文档流的位置，可能会对后面的元素排版产生影响。因此需要在该元素中清除浮动，清除浮动后造成的影响。
一、清除浮动的本质
为了解决父级元素因为子级元素引起内部高度为0的问题。
html
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.box1 {
width: 960px;
/*height: 100px;*/
background-color: red;
}
.box2 {
width: 960px;
height: 200px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 150px;
height: 100px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box2"></div>
</body>
</html>父级元素不定义高度是因为不知道盒子里面的内容有多少。
如果son1和son2都浮动了，父级元素没有高度，则会产生重叠。
二、清除浮动的方法
实际上叫做闭合浮动更好，清除浮动是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，基本语法格式：
left
right
both 同时清除左右两侧浮动的影响
-
额外标签法
在浮动盒子的后面添加一个空盒子。
html<div style="clear:both"></div>优点：通俗易懂，书写方便
缺点：添加许多无意义标签，结构化较差，
html<html> <head> <style> * { padding: 0; margin: 0; } .box1 { width: 960px; /*height: 100px;*/ background-color: red; } .box2 { width: 960px; height: 200px; background-color: purple; } .son1 { width: 150px; height: 100px; background-color: skyblue; float: left; } .son2 { width: 150px; height: 100px; background-color: pink; float: left; } .clear { clear: both; } </style> </head> <body> <div class="box1"> <div class="son1"></div> <div class="son2"></div> <div class="clear"></div> </div> <div class="box2"></div> </body> </html> -
父级添加overflow方法
给父级添加：overflow为hidden|auto|scroll都可以实现。
优点：代码简洁
缺点：内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素。
html<html> <head> <style> * { padding: 0; margin: 0; } .box1 { width: 960px; /*height: 100px;*/ background-color: red; overflow: hidden; /*触发BFC 清除浮动*/ } .box2 { width: 960px; height: 200px; background-color: purple; } .son1 { width: 150px; height: 100px; background-color: skyblue; float: left; } .son2 { width: 150px; height: 100px; background-color: pink; float: left; } </style> </head> <body> <div class="box1"> <div class="son1"></div> <div class="son2"></div> </div> <div class="box2"></div> </body> </html> -
使用after伪元素清除浮动
:after方式为空元素的升级版，好处是不用单独加标签了
html.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; /**代表ie6.7能识别的*/ }优点：符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。
代表网站：百度、网易、淘宝等
html<html> <head> <style> * { padding: 0; margin: 0; } .box1 { width: 960px; /*height: 100px;*/ background-color: red; } .box2 { width: 960px; height: 200px; background-color: purple; } .son1 { width: 150px; height: 100px; background-color: skyblue; float: left; } .son2 { width: 150px; height: 100px; background-color: pink; float: left; } p::after { content: "456"; } .clearfix:after { /*:可以*/ content: "."; /*内容为小点，尽量加不要空，否则旧版本浏览器有空隙*/ display: block; /*转换为块级元素*/ height: 0; /*高度为0*/ visibility: hidden; /*隐藏盒子*/ clear: both; } .clearfix { *zoom: 1; /**代表ie6.7能识别的*/ } </style> </head> <body> <p>123</p> <div class="box1 clearfix"> <div class="son1"></div> <div class="son2"></div> </div> <div class="box2"></div> </body> </html> -
使用双伪元素清除浮动
html.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; /**代表ie6.7能识别的*/ }优点：代码更简洁
缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。
代表网站：小米、腾讯等
html<html> <head> <style> * { padding: 0; margin: 0; } .box1 { width: 960px; /*height: 100px;*/ background-color: red; } .box2 { width: 960px; height: 200px; background-color: purple; } .son1 { width: 150px; height: 100px; background-color: skyblue; float: left; } .son2 { width: 150px; height: 100px; background-color: pink; float: left; } p::after { content: "456"; } .clearfix:before, .clearfix:after { /*:可以*/ content: ""; /*内容为空*/ display: table; /*触发bfc 防止外边距合并*/ } .clearfix::after { clear: both; } .clearfix { *zoom: 1; /**代表ie6.7能识别的*/ } </style> </head> <body> <p>123</p> <div class="box1 clearfix"> <div class="son1"></div> <div class="son2"></div> </div> <div class="box2"></div> </body> </html>