float - CSS基础：浮动引起的布局变化

问题描述

问 题

<style>
    div img{ float: left; width: 100px;}
</style>
<div>
Woj透露，乔治 <img ....> 已下定决心在明年夏天加盟家乡球队湖人，无论湖人是否愿意给出筹码从步行者交易得到他。
根据Woj昨天的报道，乔治的经纪人已经告知步行者将会在下赛季结束之后离开球队。据步行者记者Nate Taylor报道，昨天之前步行者管理层仍然希望以乔治为核心建队。
</div>

---

当 上面的 width 设置成比100%时，上面会出现一行文字。为什么不是文字在下面？？

解决方案

CSS规范规定了浮动行为，其中有如下规定：

The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

A floating box must be placed as high as possible.

也就是说，浮动元素的上外边界不能比它前面元素的行框的顶端高，并且浮动元素要尽可能高的放置。

Woj透露，乔治 <img ....> img前面的文字Woj透露，乔治 会产生一个行框，也就是img的顶端不能比这个文字产生的行框高；

当img的宽度是100px的时候，img的宽度加上Woj透露，乔治 的宽度不超过父元素div的宽度，所以满足上述两个条件的位置如第一张图所示；
当img的宽度是100%的时候，img的宽度加上Woj透露，乔治 的宽度超过了父元素div的宽度（img元素本身就会占据整个宽度），所以这个时候文字Woj透露，乔治 就会在img的下面显示，但是如果这样的话，浮动元素的顶端就比它前面的文字Woj透露，乔治 产生的行框的顶端高了，不符合上面的规定。因为只规定了不能高，所以低是允许的，所以img就会往下走，但是规定又说要尽可能高的显示，所以就会在Woj透露，乔治 的下一行显示，效果如第二张图所示。

这篇关于float - CSS基础：浮动引起的布局变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！