怎么清除浮动

      有人会有疑问为什么要清楚浮动呢？其实清楚浮动主要是解决父元素因为子级元素浮动引起的内部高度为0的问题，那么你知道怎么清除浮动吗？

      本文所讨论场景均由以下代码表示。

HTML结构：

<div class="outer">
  <div class="inner"></div>
</div>

CSS样式：

.outer{
  width:300px;
  border: 1px solid #ccc;
  background:red;
}
.inner{
  width:100px;
  height:100px;
  background: blue;
  float:left;
}

      以上代码显示结果为

      期待的显示结果为

      分析：由上图看出，父元素为被撑开，高度为0，所以看不到其背景色。

      （我理解的浮动：游泳池底有一个大小height可伸缩的.outer，里面放着一个.inner，有一天你对.inner设置了浮动，它就飘到游泳池的水面了（当然，它仍在.outer占据位置，这里仅仅用来理解父元素缩小的原因，不适用于浮动其他特性的理解），于是.outer就瘪下去了，因为没人撑开它了）

      下面进入正题，讨论以下常见的四种清除浮动的方法，下列均能得到期待的显示结果。

      （1）添加块级新元素，并设置为clear：both

      HTML结构：

<div class="outer">
  <div class="inner"></div>
  <div class="new"></div>
</div>

CSS样式：

.new{
  clear:both;
}

      原理分析：clear：both属性会防止指定了clear的元素两边存在浮动元素。由于.new左右均不能有浮动元素，所以它必须在.inner下面找到一个位置，所以.outer就被撑开了。注意：新添加的.new一定要为块级元素，不然.new就不会换行在.inner下面找位置，而是在inner右边找位置了。

      优点：易理解，不容易受其他属性设置影响

      缺点：增加了dom节点数

      （2）父元素定义 overflow: auto

CSS样式：

.outer{
  width:300px;
  border: 1px solid #ccc;
  background:red;
  overflow:auto;
}

      原理分析：应用了overflow：auto的元素，将会扩展它的大小以包围它所包含的元素，而浮动元素仍在父元素中占据位置，因此，.outer会扩展其大小以包含.inner。

      优点：代码量少

      缺点：易受影响。比如若父元素设置了高度，当子元素高度超过父元素时，会出现滚动条。

（3）对父元素添加伪类：after

.outer:after{
  content:"";
  display: block;
  clear:both;
}

      原理分析：这种方法原理与第一种方法原理类似，都是通过添加一个元素来撑开父元素（content:""; 相当于一个空内联元素，display: block;将此空元素设为以块级元素显示，clear:both; 防止其左右有浮动元素）。不同的是，伪类不占据dom元素节点，这也是这种方法相比方法一的优点。

      优点：不占据dom节点，适用性广

      缺点：代码量多，据说对seo不友好（待求证）

      （4）对父元素也设置float

.outer{
  width:300px;
  border: 1px solid #ccc;
  background:red;
  float:left;
}

      原理分析：float属性有一个特性，浮动元素会延伸，从而包含其所有后代浮动元素（css权威指南P299），因此.outer会延伸其高度，以包含.inner。

      优点：简单易行

      缺点：适用性不强，对父元素设置float可能会影响整体布局。

      总结：综合来看，第三种通过伪类来清除浮动的方法比较好。不过，实际使用时，还是要根据实际场景，综合考虑选择适用的清除浮动方法。

      以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持爱站技术频道！