亲爱的小伙伴们，你们是不是在网页布局的时候，遇到了清除浮动的难题呢？别担心， 啥玩意儿？ 今天我就来教你们如何轻松掌握清除浮动的技巧，让你们的网页布局告别烦恼！

什么是清除浮动？

清除浮动，就是解决浮动元素导致容器高度塌陷的问题。简单就是让浮动元素脱离其父容器，让父容器正常显示高度，当冤大头了。。

清除浮动的技巧

下面我就来介绍几种清除浮动的技巧，让你们轻松解决布局难题，太刺激了。。

1. 使用CSS的clear属性

在需要清除浮动的元素上添加clear属性，可yi清除其前后的浮动元素。具体用法如下：

clear: both; /* 清除左右浮动 */
clear: left; /* 清除左浮动 */
clear: right; /* 清除右浮动 */

2. 使用伪元素

伪元素可yi用来清除浮动， 具体方法如下：，不地道。

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

这种方法在兼容性方面较好，但在IE6和IE7中需要添加额外的CSS代码。

3. 使用overflow属性

太虐了。 在需要清除浮动的元素的父容器上设置overflow属性为hidden，可yi清除浮动。具体用法如下：

.container {
  overflow: hidden;
}

这种方法在兼容性方面较好，但在某些情况下可Neng会导致布局错乱，放心去做...。

4. 使用display属性

共勉。 在需要清除浮动的元素的父容器上设置display属性为inline-block，可yi清除浮动。具体用法如下：

.container {
  display: inline-block;
}

5. 使用JavaScript

可yi使用JavaScript来清除浮动， 具体方法如下：

function clearFloat {
  var container = document.createElement;
  container.style.clear = 'both';
  parent.appendChild;
}

这种方法在兼容性方面较好，但需要编写额外的JavaScript代码，精神内耗。。