1使用overflow属性清除浮动 会误伤
2使用空标记清除浮动<div style=“clear:both”> </div>隔墙法 会增加标签
3使用after伪对象
4使用before after伪对象
(1,3,4会在综合应用中使用)
---Clearfix使用场景:
1父盒子包裹所有子盒子
2父盒子是包裹整行div,需要前后清除浮动
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
*{padding:0;border:0;margin:0 ;}
.topBar,.main_left,.content,.footer{width: 960px;margin: 0 auto 10px auto;background-color: #C2D8F0;border:1px solid #000;}
.topBar{height: 100px;}
.main_left{height: 200px;width:200px;float:left;border:1px solid #000;}
.main_right{height: 200px;float:left;width: 756px;border:1px solid #000;}
.footer{height: 100px;}
/*.content{overflow: hidden;}*/
.clearfix{display: table;clear:both;}/*display:table;可以出发BFC */
.clearfix:after,.clearfix:before {content:"";display: block;clear:both;}
</style>
<meta charset="UTF-8">
<title>divDemo</title>
</head>
<body>
<div class="topBar">topBar</div>
<div class="content clearfix">
<div class="main_left">main_left</div>
<div class="main_right">main_right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
1触发bfc
2清除浮动
解决父容器塌陷问题:给父容器增加overflow:hidden属性