css 清除浮动方法

方法一

使用一个空标签

<div class="content">
    <div class="col-1">布局1</div>
    <div class="col-2">布局2</div>
    内容
    <div class="clear"></div>
</div>

clear的 CSS样式如下：

.clear {
    clear: both;
}

方法二：

给父元素设置display:inline-block属性：

.content {
  display: inline-block
}

方法三

给父元素设置overflow:auto或hidden属性：

.content {
    overflow: auto;  /* 设置 hidden 也可以 */
}

方法四

给父元素添加类名clearfix，利用css伪类（比较常用，例如bootstrap框架使用的就是这种方法）

.clearfix:after {content:""; display: table; clear: both;}
.clearfix {*zoom:1;}

HTML标签如下：

<div class="content clearfix"></div>