# 清除浮动的几种有效方法

2018-01-20 本文已影响0人我叫小麦0708

浮动的定义：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动是CSS布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。

   .content {
      width: 300px;
      border: 2px solid;
    }
    .aside {
      width: 100px;
      background: red;
      height: 100px;
      float: left;
    }
    .main {
      width: 100px;
      height: 100px;
      background: blue;
      float: right;
    }
  </style>
<body>
  <div class="content">
    <div class="aside">左浮动</div>
    <div class="main">右浮动</div>
  </div>
</body>

浮动

块级元素添加浮动后，父元素没有发现，导致无法把父元素撑开，使父元素塌陷

清除浮动的方法

一. 添加空标签

在两个块级元素main下方添加一个div空标签，在其元素的style中添加clear属性：clear:both;

<style>
.box {
      clear: both;
    }
</style>
<body>
  <div class="content">
    <div class="aside">左浮动</div>
    <div class="main">右浮动</div>
    <div class="box">无浮动</div>
  </div>
</body>

添加一个空标签后，去除左右浮动后，父元素可以发现这个普通流，父元素被这个空标签给撑开了
缺点：添加一个无意义的标签，影响整体美观性

二. 父元素定义overflow:hidden

添加overflow:hidden后，是父元素高度固定，超出固定高度后就会溢出隐藏

<style>
.content {
      overflow: hidden;
    }
</style>
<body>
  <div class="content">
    <div class="aside">左浮动</div>
    <div class="main">右浮动</div>
  </div>
</body>

overflow:hidden与overflow:auto相对应
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏

三. 父元素定义伪元素:after

为了兼容IE6,7使用需要在父元素的样式中添加zoom: 1;添加zoom: 1;后会触发浏览器的haslayout属性，来达到类似清除浮动的效果。

<style>
    .content {
      *zoom: 1;
    }
   .content::after {
      content: '';
      display: block;
      clear: both;
    }
  </style>

content是在块级标签后增加内容，添加的标签为行内元素，使用display:block;变为块级元素并清除左右的浮动，从而达到了清除浮动的效果。

以上是目前常用的三种方法，其中父元素定义伪元素:after的方法最优，另外还有其实清除浮动的方法，例如：使用定位position: absolute;、使父元素成为浮动float: left;则不需要清除浮动等方法。