当对象使用了float样式后，父对象本身不能被撑开，这个问题只要做过些web开发的朋友都会遇到，这边文章就来讲下如何解决此问题。
我先贴一段代码，看下问题：
.float_item {
border: 3px solid red;
width: 400px;
text-align: center;
}
.left {
width: 50%;
height: 150px;
line-height: 150px;
background: rgba(0, 0, 0, 0.3);
float: left;
}
.right {
width: 50%;
height: 150px;
line-height: 150px;
float: left;
background: rgba(0, 255, 255, 0.3);
}
<div class="float_item">
<div class="left">左侧浮动块</div>
<div class="right">右侧浮动块</div>
</div>
运行后的效果是这样的：
css浮动导致父元素无高度问题
红色边框没有高度，如果下方有元素，排版时就会和浮动元素重叠，这个显然不是我们想要的。我们希望的样子应该是这样的：
我们希望的样子
为了实现图二的效果，可以采用如下方法
方案一：添加clear元素
<div class="float_item">
<div class="left">左侧浮动块</div>
<div class="right">右侧浮动块</div>
<div style="clear:both;"></div>
</div>
方案二：添加overflow样式
<div class="float_item" style="overflow:hidden">
<div class="left">左侧浮动块</div>
<div class="right">右侧浮动块</div>
</div>
