css之清除浮动

这几天先整理下清除浮动的方法；

产生问题的原因：在一个容器中，有多个浮动的子元素，会造成显示结果意想不到的问题。
在CSS规范中，浮动定位不属于正常的文档流，而是独立定位的。
浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。这个定位是不同的。
关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）；
所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。
所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。

解决方法：

1.添加额外空标签

优点：简单，代码少，浏览器兼容好；
缺点：引入无意义标签，有违结构和表现的分离，很不利于后期维护；

     body,div,p{
        padding: 0;
        margin:0;
     }
     .div1{
        background-color: #6699A1;
        border: 1px solid black;
   }
     .left{
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
     }
     .contant{
        width: 200px;
        height: 250px;
        background-color: yellow;
        float: left;
     }
     .right{
        width: 200px;
        height: 100px;
        background-color: #F8C3CD;
        float: left;
     }
     .clear{
        clear: both;
     }

    <div class="div1">
        <div class="left">left</div>
        <div class="contant">contant</div>
        <div class="right">right</div>
        <div class="clear"></div>
    </div>
    <div style='width:100px;background-color:#A6DCF0;'>这是一段测试余元</div>

2.父元素设置 overflow：hidden

优点：代码少，不存在结构和语义化的问题；
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；overflow:hidden会导致中键失效。

原理：这里涉及到BFC,详细可参考张鑫旭的博客CSS深入理解流体特性和BFC特性下多栏自适应布局，以及梦想天空的前端精选文摘：BFC 神奇背后的原理
当父元素设置以为overflow：hidden时，触发BFC,计算BFC的高度时，浮动元素也参与计算，所以父元素高度撑开。

BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

以下元素会触发BFC:

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible

     body,div,p{
        padding: 0;
        margin:0;
     }
     .div1{
        background-color: #6699A1;
        border: 1px solid black;
        overflow: hidden;
   }
     .left{
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
     }
     .contant{
        width: 200px;
        height: 250px;
        background-color: yellow;
        float: left;
     }
     .right{
        width: 200px;
        height: 100px;
        background-color: #F8C3CD;
        float: left;
     }

    <div class="div1">
        <div class="left">left</div>
        <div class="contant">contant</div>
        <div class="right">right</div>
    </div>
    <p style='background-color:#A6DCF0;'>这是一段测试余元</p>

3.使用:after伪元素

优点：结构和语义化完全正确,代码量居中
缺点：复用方式不当会造成代码量增加

     body,div,p{
        padding: 0;
        margin:0;
     }
     .div1{
        background-color: #6699A1;
        border: 1px solid black;
   }
    .clearfix:after{
        content: '.';
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
    }
    .clearfix{
        zoom:1;  //IE567
    }
     .left{
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
     }
     .contant{
        width: 200px;
        height: 250px;
        background-color: yellow;
        float: left;
     }
     .right{
        width: 200px;
        height: 100px;
        background-color: #F8C3CD;
        float: left;
     }

    <div class="div1 clearfix">
        <div class="left">left</div>
        <div class="contant">contant</div>
        <div class="right">right</div>
    </div>
    <p style='background-color:#A6DCF0;'>这是一段测试余元</p>