为什么要清除浮动以及清除浮动的方法-优快云博客

本文详细介绍了为什么需要清除浮动以及四种有效的清除浮动方法：设置固定高度、使用clear:both、利用伪元素和br标签。通过实例解释了如何避免父元素塌陷，保持页面布局稳定。

1.为什么要清除浮动

浮动元素会脱离文档流，导致父元素塌陷；举个例子：一个橡皮筋绑了10根筷子，此时橡皮筋就被撑开；当把筷子从橡皮筋中拿出来时，橡皮筋就变回原样。这样当话，父元素中如果有背景图片或是其他样式，就会受到影响。

2.清除浮动的方法

a.给父元素设置固定的高度

b.clear:both

在最后一个子元素的后面添加一个块级元素，然后将其设置clear:both,这样就可以清除浮动

<div id="wrap">
    <div id="inner"></div>
    <div style="clear: both;"></div>
</div>
#wrap{
      border: 1px solid;
}
#inner{
      float: left;
      width: 200px;
      height: 200px;
      background: pink;
}
复制代码

c.伪元素清除浮动

其实和第二种方法一样，只是第二种方法会添加一个冗余元素；使用：after在浮动元素的父容器后添加一个看不见的块级元素，设置为clear：both；

<div id="wrap" class="clearfix">
  <div id="inner"></div>
</div>

  #wrap {
    border: 1px solid;
  }
  #inner {
    float: left;
    width: 200px;
    height: 200px;
    background: pink;
  }
  /*开启haslayout*/
  .clearfix {
    *zoom: 1;
  }
  /*ie6 7 不支持伪元素*/
  .clearfix:after {
    content: '';
    display: block;
    clear: both;
    height:0;
    line-height:0;
    visibility:hidden;//允许浏览器渲染它，但是不显示出来
  }
复制代码

d.br标签清除浮动

br标签有一个clear属性，设置为all可以清除浮动

  <div id="wrap">
  <div id="inner"></div>
  <br clear="all" />
</div>
  #wrap {
    border: 1px solid;
  }
  #inner {
    float: left;
    width: 200px;
    height: 200px;
    background: pink;
  }
复制代码

参考文章：github.com/ljianshu/Bl… 浪里行舟大佬