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>
原文：http://www.cnblogs.com/juhualang/p/3765436.html