本文深入探讨了浮动元素（float）的行为，特别是当box1设置clear:right无效的情况。原因在于浮动元素脱离了正常文档流，导致box1无法通过清除浮动影响box2的位置。文章强调了改变自身位置无法解决这个问题，而box2仍然会跟随box1。作者提出，为实现换行，可以将需要换行的元素设置为clear:both。通过这个案例，对浮动有了更深刻的认识。
嗯 box1 box2 不在同一行了 实现了目的
那为什么box1设置clear:right 不好使呢
因为呢box1 只能通过改变自己的位置来让自己右边没有浮动的元素
就像生活中 你改变不了别人 但是你可以改变自己
但是 box1就算改变了自己位置 box2 还会紧跟着box1的 因为浮动元素都是脱离文档流的
并且脱离文档流的理应去找脱离文档流的元素 因为元素变成了特殊的inline-block类型
有宽高 并且不换行 inline 和 block 特征合体 很牛逼
这里box1 就算清除右浮动 box2还是会跟着它 最终结果 box1 box2 box3 还是在一行
ps 可能你会想 那box1 跑到下一行 让box2 box3 不动就好了 那不行的 清除浮动 不是float:none 都是浮动 并且 在html
中box1 box2 box3 是依次创建的 凭什么你在我前面 你以为你是定位呢呢？？瞎TM跑
但是box2清除左浮动 通过改变自身位置 换行
顺序还是不变的 box1 box2 box 3
box3跟着box2 验证了前面说的
通过这次理解 对浮动又有了一个深刻的认知
所以你把需要换行的元素 都设置成clear:both
一点问题都没有了
左边不行 右边 右边也不行 那就靠下一个元素
相关文章推荐:
扫一扫
980
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
