方法一

使用一個空標籤

<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>