CSS 奇技淫巧

display:inline-block
代替 float;  消除 inline-block 元素之间的缝隙

ul{font-size:0; /* 子级 inline-block 产生的缝隙取消 */}

li{

    display: inline-block;

    *display: inline;   /* 如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失 */

    width:200px;

    height:200px;

    background: red;

    font-size: 12px;    /* 父级通过 font-size 消除了 inline-block产生的留白, 故重新设置 font-size */

    zoom:1; /* 触发haslayout */

}

 子级
nagative margin-tob 让父级高度收缩 (效果与设置父级固定高度一致);

<div class="container">

    <div style="padding-bottom:50px; background: pink">  <!-- ★ 父级必须设置 padding-bottom: 大于0, 否则无效 -->

        <img src="http://f.hiphotos.baidu.com/news/pic/item/94cad1c8a786c917250b38d8cb3d70cf3ac757c2.jpg" style="display: block; margin-bottom: -100px;">

    </div>

<div style="margin-top:100px; padding-bottom:0px; background: pink">  <!-- 父级 padding-bottom: 0, 所以子级 margin-bottom: nagative 无效 -->

        <img src="http://f.hiphotos.baidu.com/news/pic/item/94cad1c8a786c917250b38d8cb3d70cf3ac757c2.jpg" style="display: block;">

    </div>
<div style="margin-top:100px;height:205px; background: pink">   <!-- 父级也可以直接设置固定高度, 效果同等于第一个实例  -->

        <img src="http://f.hiphotos.baidu.com/news/pic/item/94cad1c8a786c917250b38d8cb3d70cf3ac757c2.jpg" style="display: block;">

    </div>

</div>

文字绕排

图片或者div float:left; 它后面的兄弟元素就会由于它脱离文档流而位置产生变化，其中：

　　如果兄弟元素为 块状非文本， 那么这些元素将靠齐父级左上角原点 (float元素无占位空间);

　　如果兄弟元素中含有 文本，那么这些文本节点将围绕 float元素 进行绕排效果, float元素的 width 以及 padding margin
可以影响到 文本节点 与 float元素的左，上距离, 文本节点的尺寸为（ 父级左上角原点到 文本绕排最外层的范围）;

红块为未浮动的块状兄弟元素　　　　　　　　　　　　　　　　文字产生绕排，并且将文本节点所处的父级(如p标签)尺寸直接撑开

 absolute等高布局

<style type="text/css">

*{padding:0; margin:0}

.fl{float:left;}

</style>

<div class="container">

    <div class="left_wrap fl">

        <div class="left_bg"></div>

        <div class="left_con">

            您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！

        </div>

    </div>

    <div class="right_wrap fl">

        他妹哟~他妹哟~他妹哟~他妹哟~他妹哟~他妹哟~他妹哟~他妹哟~他妹哟~他妹

    </div>

</div>
<style type="text/css">

    .container{ width:600px; margin: 0 auto; overflow: hidden;/*父级高度根据子级实际内容高度进行子级多余隐藏*/ background: red; /* 这玩意是右边的背景 */}

    .left_wrap{position:relative; width:40%;}

    .left_bg{

        position: absolute;

        top:0;

        left:0;

        width:100%;

        height: 999em;

        background: pink; /* 这玩意是左边的背景 */

    }

    .left_con{position: relative; z-index: 1; /* 层级高于left_bg显示 */}

    .right_wrap{width:60%;}

</style>