ythy
commented
6 years ago - 按
top-bottom顺序依次浮起 - 优先左右对齐相邻元素， 没有空间时换行
- 当相邻对齐元素高度不同时( y1 = 100, y2 =120 )， 换行后的新行起始Y 以上一行最高的为准即 y2
不能显示环绕内容的区域有：
- 浮动元素设置了
margin，margin区域不能环绕 - 当相邻对齐浮动元素高度不同时(左浮动 box1 y = 100; width=100, box2 y = 120;width=50 )， box1下方的高度为20(120 - 100)的区域, 不能环绕
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
positioned element
An absolute or fixed positioned element leave the document flow entirely and sit on top of the normal document, and the space that would have been occupied by that element in the normal document flow is closed. Relatively positioned elements also leave the normal document flow, but the space they took up in the document isn’t closed up: it stays open and in the same spot the element originally sat, regardless of where the element moves.
float
Floats are different. They leave the document flow and the space they take up is reserved like in a relatively positioned element, but that space moves with the element. The normal document flow then does what it can to flow around that element. If the content following the float will fit beside it, it will do so.