看到这篇，补充一个：

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>自适应的图文混排</title>
<link href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" rel="stylesheet">
<style>
.clearfix:before, .clearfix:after{content:".";display:block;height:0;visibility:hidden;}
.clearfix:after{clear:both;}
.clearfix{#zoom:1;}
.media{margin:10px;}
.media .bd{overflow:hidden;#zoom:1;} /* 这句是关键 */
.media .img{float:left;margin-right:10px;_margin-right:7px;}
.media .img img{display:block;}
</style>
</head>

<body>

<div class="media clearfix">
	<div class="img">
		<img alt="犀利哥" src="http://img1.gtimg.com/cq/pics/29734/29734288.jpg" width="100">
	</div>
	<div class="bd">
		<p>人不是鱼，怎会了解鱼的忧愁。鱼不是鸟，怎会了解鸟的快乐。鸟不是人，怎会了解人的荒唐。人不是鸟，怎会了解鸟的自由。鸟不是鱼，怎会了解鱼的深沉。鱼不是人，怎会了解人的幼稚。你不是我，怎会了解我</p>
		<p>人不是鱼，怎会了解鱼的忧愁。鱼不是鸟，怎会了解鸟的快乐。鸟不是人，怎会了解人的荒唐。人不是鸟，怎会了解鸟的自由。鸟不是鱼，怎会了解鱼的深沉。鱼不是人，怎会了解人的幼稚。你不是我，怎会了解我</p>
		<p>人不是鱼，怎会了解鱼的忧愁。鱼不是鸟，怎会了解鸟的快乐。鸟不是人，怎会了解人的荒唐。人不是鸟，怎会了解鸟的自由。鸟不是鱼，怎会了解鱼的深沉。鱼不是人，怎会了解人的幼稚。你不是我，怎会了解我</p>
		<p>人不是鱼，怎会了解鱼的忧愁。鱼不是鸟，怎会了解鸟的快乐。鸟不是人，怎会了解人的荒唐。人不是鸟，怎会了解鸟的自由。鸟不是鱼，怎会了解鱼的深沉。鱼不是人，怎会了解人的幼稚。你不是我，怎会了解我</p>
		<p>人不是鱼，怎会了解鱼的忧愁。鱼不是鸟，怎会了解鸟的快乐。鸟不是人，怎会了解人的荒唐。人不是鸟，怎会了解鸟的自由。鸟不是鱼，怎会了解鱼的深沉。鱼不是人，怎会了解人的幼稚。你不是我，怎会了解我</p>
		<p>人不是鱼，怎会了解鱼的忧愁。鱼不是鸟，怎会了解鸟的快乐。鸟不是人，怎会了解人的荒唐。人不是鸟，怎会了解鸟的自由。鸟不是鱼，怎会了解鱼的深沉。鱼不是人，怎会了解人的幼稚。你不是我，怎会了解我</p>
		<p>人不是鱼，怎会了解鱼的忧愁。鱼不是鸟，怎会了解鸟的快乐。鸟不是人，怎会了解人的荒唐。人不是鸟，怎会了解鸟的自由。鸟不是鱼，怎会了解鱼的深沉。鱼不是人，怎会了解人的幼稚。你不是我，怎会了解我</p>
	</div>
</div>
<div class="media clearfix">
	<div class="img">
		<img alt="犀利哥" src="http://img1.gtimg.com/cq/pics/29734/29734288.jpg" width="200">
	</div>
	<div class="bd">
		<p>人不是鱼，怎会了解鱼的忧愁。鱼不是鸟，怎会了解鸟的快乐。鸟不是人，怎会了解人的荒唐。人不是鸟，怎会了解鸟的自由。鸟不是鱼，怎会了解鱼的深沉。鱼不是人，怎会了解人的幼稚。你不是我，怎会了解我</p>
	</div>
</div>
<div class="media clearfix">
	<div class="img">
		<img alt="犀利哥" src="http://img1.gtimg.com/cq/pics/29734/29734288.jpg" width="300">
	</div>
	<div class="bd">
		<p>人不是鱼，怎会了解鱼的忧愁。鱼不是鸟，怎会了解鸟的快乐。鸟不是人，怎会了解人的荒唐。人不是鸟，怎会了解鸟的自由。鸟不是鱼，怎会了解鱼的深沉。鱼不是人，怎会了解人的幼稚。你不是我，怎会了解我</p>
	</div>
</div>

</body>

</html>

更灵活之处

  • 兼容标准模式与怪异模式
  • 无需顾及图片尺寸
  • 避免relative带来的reflow bug、z-index bug等
  • 代码更少

该方法源自oocss的media，原理见Overflow – a secret benefit（肉饼有翻译OverFlow – 一个秘密武器）

注：清除浮动参见YUI的clearfix Reloaded + overflow:hidden Demystified（小李刀刀的翻译clearfix改良及overflow:hidden详解）