电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: CSS 真的可以浮动么？（1） [打印本页]

作者: look_w 时间: 2018-8-9 09:42 标题: CSS 真的可以浮动么？（1）

从人类开始书写文字的早期，我们就看到了文绕图的实践。
Web 的先驱们很早就认识到了文字绕图编排的美学价值及这样做所能节省出来的空间，于是在 Netscape 1.0 和 HTML 2.0 中都包括进了一种 “浮动” （float）功能。浮动功能亦成为了 HTML 标准和级联样式表（Cascading Style Sheet，CSS）规范的基本属性。
虽然 “浮动” 属性的定义十分直观，但该属性的实现和使用却让很多 Web 页面设计者为了能让页面按理想的那样显示而煞费苦心并投入了大量的时间。
在本文中，我将介绍 “浮动” 属性的如下方面：

定义和概念模型
常见用例
开发工具的问题
浏览器问题

何为 “浮动” 属性？在 CSS2 规范中，可以找到浮动属性的权威性定义和行为原则。在本文后续的章节中，我将对 CSS2 规范中的 9.5 节 “Visual Formatting Model” 中描述的内容展开讨论（相关链接，请参看）。
定义浮动属性指定了某个框应该向左侧还是向右侧浮动。此属性可应用于任何能生成位置不绝对固定的框（box）的元素。
此属性可有如下的值：

inherit - 该元素继承封装元素的浮动属性。此值为默认值。
left - 该元素生成一个浮动到左侧的块状框。内容排列到该框的右侧，并从顶部开始。这种排列取决于元素的 “clear” 属性。除非该值为 “none”，否则都会忽略 “display” 属性。
right - 这种排列取决于元素的 “clear” 属性。除非该值为 “none”，否则都会忽略 “display” 属性。
none - 该框不浮动。

行为浮动属性受限于如下规则。本文中，我只对左浮动行为进行详细描述。要获得右浮动行为的相应信息，只需互换方向即可（即，将左换成右）。
此规范依据框的边框定义行为。CSS 框模型中的四种不同的边框描述如下：

content edge 或 inner edge 围绕所呈现的元素内容。这是最接近内容的边缘。
padding edge 包括了应用到某元素的留白。padding edge 定义了此包含块的边缘。
border edge 包括了应用到某元素的边界。
margin edge 或 outer edge 包括了应用到某元素的边框。

包含块的水平限制：左浮动框的 margin edge 不能在包含块的左 padding edge 框的左边。
包含块的垂直限制：左浮动框的上 margin edge 不能高于包含块的上 padding edge。
之前浮动限制：如果当前框是左浮动框而且之前的框也是左浮动框，那么当前框的左 margin edge 必须在之前框的右 margin edge 的右边，或者当前框的上 margin edge 必须要低于之前框的下 margin edge。
无交叠限制：左浮动框的右 margin edge 不能在任何共享相同水平空间的右浮动框的左 margin edge 之右。
之前元素的垂直限制：左浮动框的上 margin edge 不能高于任何块或在由源文档中前一元素生成的被浮动框的上 margin edge。
Line-box 垂直限制：左浮动框的上 margin edge 不能高于任何包含由源文档中前一元素生成的框的 line-box 的上 padding edge。line-box 是一个假想的矩形框，包含在此块级包含元素内连成一线的所有 inline box。其高度（上 padding edge）取最高的那个 line-box 的高度。
对立水平边框限制：如果一个左浮动框的左边还有另一个左浮动框，那么这个左浮动框的右 margin edge 不能在此包含块的右 padding edge 之右。即，左浮动框不能超出此包含块的右边缘，除非它已经被定位在向左足够远的地方。
最佳垂直限制：浮动框必须被置于此包含块内尽量高的地方。
最佳水平限制：浮动框必须被置于此包含块内向左尽量远的地方。
位置优先原则：在判断浮动框位置时，最佳垂直限制优于最佳水平限制。即，要先向上移动浮动框，然后再向一侧移动。
图 1 展示了这些行为原则是如何定位一个边框与文本块相关的图像的。
图 1. 左浮动框的定位示例

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)