方法一
使用一个空标签
<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>