css清除浮动的常见方法汇总

清除浮动的方法总结

小小程序员～博客第一篇

本文比较啰嗦哈，希望大佬们多多指教，如有不合理之处，还请告知哈

css清理浮动，我觉得，首先要理解为啥要清除浮动，
清理浮动呢，一般是用在子元素无法撑开父元素的高度，从而导致父元素高度为0，也就是常说的父元素的高度塌陷。
为了更好的解释，我们来看看这个简单的例子

 <div class="li">
      <div class="lili"></div>
      <div class="lili"></div>
      <div class="lili"></div>
      <div class="lili"></div>
      <div class="lili"></div>
  </div>
  <div class="ayong"></div>

然后再看看他的css样式

body {
  padding: 0;
  margin: 0;
}
.li .lili {
  width: 200px;
  height: 200px;
  float: left;
  border: 1px solid black;
}
.ayong {
  height: 500px;
  width: 500px;
  border: 1px solid black;
}

由于lili元素浮动起来了，父元素高度塌陷，导致下面的ayong元素直接漠视它的存在。

没错，就变成了上面这个鬼样子。
其实在这里我觉得需要拓展一下，为什么它浮动起来就会这样父元素高度塌陷了呢？

其实呀，这个涉及了css的定位机制：普通流（也叫文档流），浮动，定位。

那什么是普通流呢？
简单说就是元素按照其在 HTML 中的位置顺序—>布局的过程，好比我们的地面一样
那浮动之后呢，好比飘到了半空中，那下面的空间肯定没啦，只能让下面的小伙伴顶上来啦
定位呢，也是脱离了三界之外，想到哪里去哪里，这个以后再详解

所以啊，为了让浮动起来的元素，下去凡间，必须给它的浮力清除掉，也就是清除浮动啦，下面介绍几种常见的方法

（一）给父元素添加高度
这个方法呢，通过给父元素限定固定的高度，让父元素包含子元素，在页面比较固定的场合，还是可以采用的，但是用到响应式和一些容易变动高度的问题上，很容易出现问题.

 <div class="li" style="height: 200px;">
        <div class="lili"></div>
        <div class="lili"></div>
        <div class="lili"></div>
        <div class="lili"></div>
        <div class="lili"></div>
    </div>
    <div class="ayong"></div>

额，这个呢，我觉得吧，不算是清除浮动，但是是解决浮动的一种方法，就是给它限定了高度，下面的顶不上去，毕竟有个高度在那里

（二）在子元素后面。加上一个空div来清理浮动
比如

  <div class="li">
    <div class="lili"></div>
    <div class="lili"></div>
    <div class="lili"></div>
    <div class="lili"></div>
    <div class="lili"></div>
    <div class="clearboth"></div>
</div>
<div class="ayong"></div>

css中再加上

.clearboth {
    clear: both;
}

问题也得到了解决，这确实是清理浮动的一个方法的，但是呢，如果代码量过大，增加的标签（这里是div）的量，非常的多，代码量冗余，现在不是很推荐，不过刚学的小伙伴还没搞清楚之前用这个方法简直爽歪歪。

（三）”传说中的“伪元素清理浮动

话不多说，上代码咯

只需要在其父元素那里，加上这个代码

.<div class="li clearboth">
    <div class="lili"></div>
    <div class="lili"></div>
    <div class="lili"></div>
    <div class="lili"></div>
    <div class="lili"></div>
</div>
<div class="ayong"></div>

在css中呢

.clearboth {
  *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.clearboth::after {
  display: block;
  content: "";
  clear: both;
  height: 0;
  visibility: hidden;
}

这个伪元素的方法呢，还不是很完美，因为在ie6-7不支持伪元素::after，但是有zoom:1去解决这个问题，大部分都是使用这个方法。

不过如果想让代码更加简洁，可以用双伪元素before和after来实现
只要把上面的css样式改成了

.clearboth {
  *zoom: 1;
}
.clearboth::after,
.clearboth ::before {
  content: "";
  display: table;
}
.clearboth::after {
  clear: both;
}

超级简洁的代码，清除浮动中的战斗机

（四）给父级元素增加overfloat:hidden属性

.li {
  overflow: hidden;
}

这个不用不知道，一用吓一跳，确实能达到效果，但是它不能与position连用，因为超出部分会被隐藏。而且必须定义width或zoom:1，同时不能定义height。

（五）给父级元素增加overfloat:auto属性
这个也可以达到效果，但是如果内部宽高超出父元素的话，会出现滚动条

以上的方法，就是清除浮动常见的一些汇总啦，还有一些不是很常见的，效果不是很好的，没有列出来，当然也有更好的但是我还没发现的，可以联系下我继续改进哈