CSS之清除浮动(span/clearfix)

　　一、问题描述

　　web网页设计中，在div元素中有时候常伴有图文结合的post组件。为了使得文本在图像周围环绕，那么需要对图像区域使用float浮动。如果不做清除浮动，则会出现如下结果：

　　　　图像比文本高，且图像脱离并超出了父级元素的文档流。

　　源码：

<!DOCTYPE html>
<html>
<head>
    <title>float demo span(block;clear;height)</title>
    </style>
</head>
<body>
    <div style="/* 300px;*//*height: 200px;*/padding:10px;border: 1px solid red;background-color: yellow;font-size: ">
        <div class="photo" style="border: 1px solid black;padding:15px;float: left">
            <img src="test.jpg" style="">    
        </div>
        <section style="display: block;background-color: white;padding: 1px;">
            <h3>肖像摄影</h3>
            <p>
                眼神锋利，嘴里叼着烟的画家；神情严肃，姿态自信的泥瓦匠；笑容憨厚，略有些拘谨的拳击手...... 600 多张不同年龄、职业的德国人的肖像，充满个性，又有着一脉相承的直率和倔强。这些作品来自一位以拍摄肖像而著名的德国摄影师——奥古斯特·桑德（August Sander，1876-1964）。
            </p>
        </section>
    </div>
</body>
</html>

　　原因分析：

　　此处的div父级元素只能识别出子元素文本部分的高度，而图像比文本更高，所以高出部分就露出来了。那么，为了使得图像不超出母元素的高度，就必须进行float的浮动清除。

二、解决方案一

　　源码：在父级元素内的末尾处加上span[display:block;height:0;clear:both]

<span style="display: block;clear: left;padding: 15px;background-color: red;"></span>

　　解释：在浮动元素的后面兄弟元素(一般是末尾元素)中，加入span元素(display:block,clear:left(or right(根据浮动方向来)))：
原因：块级元素(display:block)要独占一块文档流(且独立一行)，再清除一下前面浮动兄弟元素的浮动方向的浮动，那本来应该浮动的span清除浮动后，自然要独占一行了(去掉padding后，对整体文档无影响)。

　　效果：

　　缺点：蛮力【需要强行加入span并添加其样式】：增加工作量；不利于页面优化　

二、解决方案二【推荐】

　　源码：为div父级元素，设置公用类.clearfix

    .clearfix:after {
        overflow: auto;
        display: block;
        clear: both;
        content: attr(data-sort);    /* 一般为 ‘ ’，此处为做测试 */
        visibility: hidden;
        height:0;    /*使得不占据文档流*/           
    }
/*    .clearfix:before{
        overflow: auto;
        display: block;
        clear: both;
        content: ' ';
        visibility: hidden;
        height:0;       
    }*/

　　解释：略（见源码仔细领会）

　　效果：

　　优点：

　　　　组件化设计的思想，可以大面积公用；提高生产效率，也有利于页面优化

三、参考文档:

　　1.《网络设计的原理》|桧山佐知子：防止使用float时版面被破坏

　　2.图文来源：蜂鸟网：http://image.fengniao.com/534/5345869.html