CSS布局里图文混排的缺陷（语义描述不完备）

HTML CSS布局的概念里，<img>和text默认都是inline的，但text默认不对应HTML Element（对应DOM的Text node）。当把图片<img>元素和文本默认放在一起时，由于默认文档流的流式布局，<img>图片元素和文本显示在一行上，基于文本的baseline位置水平对齐。

奇怪的是，假如图片的高度不止一行文本时，则图片的右边只有一行文本显示，第2行文本的显示位置就移动到图片的下面去了。换言之，不是“彻底”的图文混排。

通过设置<img>元素的vertical-align: text-top;可以让图片和文本的顶端水平对齐，这里怪异的是，虽然CSS vertical-align: text-top;设置在<img>元素上，但布局显示受到影响的却是后面的文本。

要让文本完全占满图片右边的空间，需要对<img>元素设置float: left。

要让文本在宽度上占满图片右边的空间，同时文本的左边界与图片的右边界y位置不重叠：做不到。可以把文本用<span>包起来，设置宽度，并float:right;（相当于2列布局），但是这个例子显示CSS某些理念真的很矬。