未清除浮动的影响
- 父级元素因为子级浮动引起的内部高度为0
- 父级元素的兄弟元素高度为0,其他样式也不能实现
![](https://i-blog.csdnimg.cn/blog_migrate/a4075a6b2ef572cae0653d37fa2f21ef.png)
代码
<body>
<div class="father">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
<div class="friend">friend</div>
</body>
.child1,.child2,.friend{
width:50px;
height:50px;
}
.child1{
float:left;
border:1px solid blue;
}
.child2{
float:left;
border:1px solid green;
}
.friend{
border:1px solid red;
}
.father{
border:1px solid black;
}
方法1:给父元素加上 .clearfix
代码
<body>
<div class="father clearfix">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
<div class="friend">friend</div>
</body>
.child1,.child2,.friend{
width:50px;
height:50px;
}
.child1{
float:left;
border:1px solid blue;
}
.child2{
float:left;
border:1px solid green;
}
.friend{
border:1px solid red;
}
.father{
border:1px solid black;
}
.clearfix:after{
content: '';
display: block; /*或者 table*/
clear: both;
}
.clearfix{
zoom: 1; /* IE 兼容*/
}
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/8177165249b6a093265671c9d216d9be.png)
方法2:给父元素加上 overflow:hidden
代码
<body>
<div class="father">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
<div class="friend">friend</div>
</body>
.child1,.child2,.friend{
width:50px;
height:50px;
}
.child1{
float:left;
border:1px solid blue;
}
.child2{
float:left;
border:1px solid green;
}
.friend{
border:1px solid red;
}
.father{
border:1px solid black;
overflow:hidden
}
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/8177165249b6a093265671c9d216d9be.png)