关于浮动和清除浮动的一点想法

在CSS中有一个很重要的页面布局方法就是浮动（float），与定位，inline-block一起使用能让我们更好的理解布局

首先什么是浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

最初，引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。现在，浮动通常用来创建整个网站布局，其中包括浮动的多列信息，因此它们彼此并排放置（默认行为是列彼此之间互相堆叠，按照它们在源中出现的顺序）

浮动元素

浮动的副作用

虽然浮动能在页面布局上产生良好的作用，但是浮动仍有其副作用，主要是两点：

• 对后续元素位置产生影响
• 父容器元素高度计算出现问题（父容器不能识别浮动元素是否存在），使父元素高度产生坍陷

    <style>
        .container{
            margin: 30px auto;
            width:600px;
            height: 300px;
        }
        .p{
            border:solid 3px #a33;
        }
        .c{
            width: 100px;
            height: 100px;
            background-color: #060;
            margin: 10px;
            float: left;
        }
    </style>
    <div class="container">
        <div class="p">
            <div class="c"></div>
            <div class="c"></div>
            <div class="c"></div>
        </div>
    </div>

期待产生的效果 实际产生的效果

父容器并没有把浮动的子元素包围起来，俗称塌陷，为了消除这种现象，我们需要一些清除浮动的技巧

清除浮动

1. 使用带clear属性
   clear属性规定元素的哪一侧不允许其它之前浮动元素，也就是说我们可以在其父元素后面加一个块级元素，其属性为clear:left，左侧所有元素都不能浮动，那么父元素就不会坍陷了

  <div class="container">
       <div class="p">
            <div class="c"></div>
            <div class="c"></div>
            <div class="c"></div>
            <div style="clear:left;"></div>
        </div>
   </div>

2. 使用CSS的:after伪元素
   给浮动元素的父容器添加一个伪元素after，伪元素设置为块级元素，内容为空，清理浮动，使后面的块级元素不会占据前一个浮动元素位置导致版面问题

<style>
.floatfix:after{
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:left;
}
</style>
<div class="container">
     <div class="p clearfix">
          <div class="c"></div>
          <div class="c"></div>
          <div class="c"></div>
     </div>
</div>

3. 使用CSS的overflow属性
   给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
   

   ---

参考文章