CSS清浮动处理

以前央视新闻有条微博说7成网友赞成数学退出高考，下边一片叫好声。我有个朋友淡淡回了句：“数学就是用来把这7成人筛出去的。”这句话我永远都记得，所有被千夫所指的困难，都是为了淘汰掉懦夫，仅此而已。

做前端开发我们都不得不使用float浮动属性，但是如果使用了浮动，由于浮动本身的特性，难免会遇到父级元素塌陷的情况，不能自适应高度。 假设了有三个盒子对象，一个父级里包含了两个子级，父级元素没有设置固定高度，子级一个使用了float:left（左浮动）属性，另外一个子级使用float:right（右浮动）属性，这种情况的话父级元素的高度就必定不能被子内容而撑开。 ### 场景 三个盒子对象：

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

设置了浮动之后，父级元素不能被撑开，如图：  我们所希望的效果：  这种情况在我们的工作中特别常见，我们可以通过四种方法清除浮动。 #### 方法一 使用一个空标签

<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 也可以 */
}

方法四