当对象使用了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>