css权威指南读书笔记-第10章浮动和定位

这一章看了之后真是豁然开朗，之前虽然写了圣杯布局和双飞翼布局，有些地方也是模糊的，现在打算总结之后再写一遍。

以下都是从《css权威指南》中摘抄的我认为很有用的说明。

1. 浮动元素

一个元素浮动时，其他内容会环绕该元素。浮动元素会生成一个块级框，不论这个元素本身是什么。并且浮动元素周围的外边距不会合并。如果要浮动一个非替换元素，必须显式声明width.

浮动元素的几条规则：

1)      浮动元素的左（右）外边界不能超出其包含块（包含快是其最近的块级祖先元素）的左（右）边界。但是负外边距或者浮动元素宽于父元素可能导致浮动元素移到父元素外面

2)      如果一个元素向左浮动，另一个元素已经在那个位置，后放置的元素将挨着前一个浮动元素的右外边界放置。不过，如果一个浮动元素的顶端在所有之前浮动元素的底端下面，他可以抑制浮动到父元素的左内边界。因此，所有浮动内容都是可见的，不必担心两个浮动元素重叠。

3)      一个浮动元素的顶端不能比其父元素的内顶端高。

4)      浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端高。

5)      如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。

6)      如果没有足够的空间，浮动元素会被挤到一个新行上。

7)      浮动元素必须尽可能高的放置，其顶端应该与其标记所在行框顶端对齐。左浮动元素必须向左放置的尽可能远，右浮动元素同理。这些规则互相限制。

如果浮动元素与正常流中的内容重叠：

1)      行内框与一个浮动元素重叠时，其边框，背景和内容都在该浮动元素“之上”显示

2)      块框与一个浮动元素重叠时，其边框，背景在浮动元素“之下”显示，而内容在浮动元素“之上”显示。

3)      这些重叠行为与源文档的顺序无关。

1. 清除浮动

如果声明 h1{ clear: left}，那么清除的是h1元素本身左边的浮动。

1. 定位

position：static（默认值）relative absolute fixed inherit

static：元素正常生成

relative: 元素框偏移某个距离。元素仍保持其未定位前的形状，他原本所占的空间仍保留。

absolute: 元素框从文档中完全删除，并相对于其包含块（一般是position的值不是static的祖先元素，一般会选择一个元素作为绝对定位元素的包含块，将其position指定为relative并且不偏移）定位。元素定位后总会生成一个块级框，不管原来是什么类型的值。

元素绝对定位时，还会为后代元素建立一个包含块，即后代元素可以相对于这个元素再进行绝对定位

fixed: 相对于浏览器窗口进行绝对定位。

1)      绝对定位：

元素绝对定位时，如果top:auto,则定位元素的顶端会相对于未定位前本来的顶端对齐。left和right设置为auto也是一样。元素在水平方向上过度受限时会忽略right值，在垂直方向上过度受限时将忽略bottom值。这条规则对于替换元素和非替换元素都成立

2)      相对定位

相对定位元素相对原来的位置而不是其父元素定位。当元素相对定位时，他会从正常位置移走，但它原来所占的空间不会因此消失。如果遇到过度受限的相对定位，bottom总等于-top，right总等于-left