p>TextWrappingTextWrappingTextWrappingTextWrappingTextWrappingTextWrappingTextWrappingTextWrappingTextWrappingTextWrappingTextWrapping

可以看到父元素的高度为0，但这不是bug，而是浮动本身就是这样设计的，所以只有当父元素的高度塌陷时，下面的元素才有机会浮起来。但是光靠这个是不能形成图片环绕的效果的，否则文字浮上来只会盖住图片。这里还隐藏了一个特点：linebox和floatingelements的non-overlapping是指linebox和floating元素不会重叠，所以下面的文字在浮动上去后不会盖住图片。即使我们为文本设置负边距也不起作用。floatset的元素没有margin合并，因为BFC的形成，没有margin合并。我们来看看浮动机制：.float{float:right;}在标准浏览器中，“标题”和“链接”会显示在同一行，“链接”会向右浮动。但是如果“标题”太长，一行都放不下，那么“链接”应该浮在第一行还是第二行呢？答案是第二行。要解释这个，首先要明白两个概念，一个是“浮动锚点”，一个是“浮动引用”：浮动锚点是浮动元素所在的“流”中的一个点。点本身不是浮动的，表现得像一个没有边距、填充或边框的空内联元素。浮动引用是指浮动元素与之对齐的实体。float元素的“浮动引用”是linebox，即float元素定位在当前“linebox”内，所以上面的例子“link”会显示在第二行。但也有一种情况，浮动元素前后没有内联元素，所以也就没有linebox。这时，“浮锚”在起作用。因为“浮动锚点”表现得像一个内联元素，有一个内联元素，自然就有一个线框，只不过这个框是看不见摸不着的。float实现流体布局前面文字换行的例子。只需稍作修改即可实现两列或多列的自适应布局。代码如下：.father{overflow:hidden;height:200px;}.float{float:left;width:100px;}.content{margin-left:120px;}文字换行文字换行文字换行文字换行文字换行文字换行文字换行文字换行文字换行文字换行文字换行