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{浮动：左；宽度：100px；}.content{margin-left：120px；TextWrappingTextWrappingTextWrappingTextWrappingTextWrappingTextWrappingTextWrappingTextWrappingTextWrappingTextWrapping