当元素 float 后元素身上发生了什么：
脱离当前的文档流，变换到容器的边缘，或是另一个浮动box的边缘，若空间不够则向下移动直到可以放下（margin的值是auto或不指定在渲染时会被当做0处理）
文档流中的line box, inline box将围绕float box
float box若不设宽度将是它实际内容的宽度
把box都变成block-level box，形成一个新的block formatting context
top/left/right/bottom, z-index无效
滥用float会导致各种bug，诸如：Incorrect Float Shrink-Wrap Bug、Float Squeeze Weird Gap Bug、Float Squeeze Duplicate Last Character Bug、Image Float Bullet Chaos Bug、Staircase Bug、Double Margin Bug、Italics Float Bug、3px Jog Bug、Scared of Floats Bug、Escaping Floats Bug、IE6 Peekaboo Bug……等等。所以在实际使用中有个原则，尽量不同时用2个或以上的float（比如可以用inline-block替代float）
网友评论