[CSS] 浮动

[wang1dot0]

浮动的元素

• 浮动元素脱离了文档流，不过对布局有影响。
• 浮动元素四周的外边距不折叠。
• 浮动元素是非置换元素，要为其设置宽度，否则CSS规范规定，其宽度接近于零。
• 元素浮动之后得到的都是块级框。

浮动规则

• 浮动元素的左（右）外边界不能超过容纳块的左（右）内边界
• 如果文档中前面的元素左浮动，那么后面的浮动元素的左外边界必定在前一个元素右外边界的右侧，除非后一个元素的顶边在前一个元素的底边以下。
• 左浮动元素的右外边界不能在右浮动元素的左外边界的右侧。
• 浮动元素的顶边不能比父元素的内顶边高。如果浮动元素位于两个折叠的外边距之间，在两个元素之间放置它的位置时，将视其有个块级父元素。
• 浮动元素的顶边不能比前方任何一个浮动元素或块级元素的顶边高。
• 浮动元素的顶边不高于文档源码中出现在浮动元素之前的元素生成的框体所在的方框的顶边。
• 左浮动元素的左边如果还有一个向左浮动的元素，那么它的右外边界不能在容纳块右边界的右侧。
• 浮动元素必须放在尽可能高的位置。
• 左浮动元素必须尽量向左移动，右浮动元素必须尽量向右移动。

浮动元素的后代也浮动时，将扩大范围，涵盖浮动的后代元素。

负外边距对浮动元素的影响

会使得浮动元素超出所在的父元素。 CSS 规范规定，UA 无需为文档中位于后面的内容腾出空间而重排之前的内容。

浮动元素与内容重叠

• 行内框与浮动元素重叠时，其边框，背景和内容都在浮动元素之上渲染
• 块级框与浮动元素重叠时，其边框和背景在浮动元素的背后渲染，而内容在浮动元素之上渲染。