CSS: 清除浮动

为什么要清除浮动

虽然说现在 9102 年了应该不会再有人用 float 了,但是有些老网页还是会有 float 来布局的。float 带来的主要问题是高度坍塌。如:

<div class="parent">
  <div class="children"></div>
</div>

在子元素设置了 float 后,父元素的高度就没了。

.parent {
  border: 1px solid green;
}

.children {
  float: left;
  height: 100px;
  widtH: 100px;
  border: 1px solid red;
}

结果:

父元素的高度为0

主要的原因是因为设置了 float 之后,子元素就脱离文档流,也就相当于浮在父元素上了,从二维变到了三维。父元素里面就中空了,高度也为0了,不再是子元素高度。

解决方法一般有两个。

overflow

最简单但是会带有副作用的方法是在父元素上添加一个 overflow:hidden 就可以了。

.parent {
  overflow: hidden;
  border: 1px solid green;
}

.children {
  float: left;
  height: 100px;
  widtH: 100px;
  border: 1px solid red;
}

结果:

父元素高度回来了

但是如果代码多了,每个地方都要加这一句很麻烦,而且有可能父元素 oveflow:hidden 和别的样式冲突就麻烦了。

clearfix

我们可以使用另一个方法,也是推荐的方法。首先定义一个 .clearfix 的类

 .clearfix::after{
    content: ''; 
    display: block; 
    clear:both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容 */
 }

然后将这个类添加到父元素上就可以了。

<div class="parent clearfix">
  <div class="children"></div>
</div>

这样的副作用基本是没有的,而且只需要在父元素上添加 class 类就好了,更方便。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,291评论 1 91
  • 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(flo...
    秦至阅读 265评论 1 8
  • 在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼。 浮动带来...
    wmsj100阅读 585评论 0 1
  • 引言 - float 有哪些特性 破坏性float 破坏了父标签的原本结构,使父标签出现了塌陷现象。导致这一现象的...
    番茄沙司a阅读 393评论 0 0
  • 清除浮动详解 清除浮动主要是为了解决由于浮动元素脱离文流导致的元素重叠或者父元素高度坍塌的问题,而这两个问题分别对...
    One_Hund阅读 653评论 0 0
  • 对于人力资源经验不多,现在收到两个公司的offer,一个是猎头公司,不算出名,另一个是一家互联网公司,40人左右,...
    七秒1993阅读 89评论 1 0
  • 如果你是一个女性,你一定渴望和男人拥有一样的社会地位,尤其是在男女平等之后。 昨天备课,做到一篇高考完型,讲的是现...
    KoosQ阅读 152评论 0 0
  • 豆制品是咱们桌上的家常菜,卖豆制品的在市场上都有单独的摊位,嫩豆腐,老豆腐,豆浆 ,豆腐花,烟熏豆干,五香豆干,卤...
    一盏热茶阅读 194评论 1 0