CSS定位与浮动总结

CSS定位与浮动总结（必须理解记住）

CSS定位与浮动总结（主要是通过学习《写给大家看的CSS书》，这是本不可多得的书啊）

• 盒模型结论1：特定尺寸的盒子（宽度已定）会随着内边距、边框、及外边距的添加扩展，进而占据更多的水平空间。事实上，通过width属性设置的是盒子内容的宽度，而不是盒子本身的宽度。

• 盒模型结论2：无尺寸限制的元素（未设置宽度）会扩展到与它的包含元素同宽。因此，为无尺寸限制的元素添加水平外边距、边框和内边距，会导致元素内容的宽度变化。

• 一个div未设定宽度，那么它的宽度将与窗口同宽。
  

• div设定float属性后，如果未设定它的宽度，那么它的宽度将收缩到最小。

• 子div设定float属性后，父div将感应不到子div的高度，此时如果想让父div高度随子div高度变化而变化可以在子div后添加这样一个空白div“<div style="clear:both;></div>”，或者将父div也设置float属性，但建议使用前者。

• div设定float属性后，它将脱离常规文档流，紧临的div将会占用它的位置，视其不存在，此时它们在窗口的最左上方重合，但紧临div内部的元素（比如img、p等）此时居然会围绕该div。但如果将紧临的div也设置float属性，它们将并排排列。

• div设定float属性后，它将脱离常规文档流，紧临其后的元素（除div）将会浮动到它的旁边。

• 绝对定位元素默认的定位环境是body元素，当为其父元素设定"position:relative"时，该父元素将成为其定位环境，父元素设定为“position:absolute”时也可以，但一般不这么做。

• div处于静态（默认）定位状态时，它的top和left属性的值将被忽略。

• 在为行内元素应用内边距和边框时，它们不会像我们期望那样影响父元素。行内元素的垂直内边距不会像块级元素那样，沿着文档层次向上传递到父元素。因而父元素也不会调整自身大小来容纳被链接占用的更大区域。简单的补救办法是把行内元素转换为块级元素display:block;