第8章 浮动布局 1. 浮动（float） 浮动的方式：none、left、right 取值 说明 float : none 不浮动 float : left 浮动在左边 float : right 浮动在右边 2. 清理浮动产生的影响 clear: both | left | right 取值 说明 clear : both 两边不允许有浮动的对象 clear : left 左边不允许有浮动的对象 clear : right 右边不允许有浮动的对象 3. 认识浮动现象 浮动元素只能水平地向左或向右浮动，不可能斜向上或斜向下浮动。 浮动元素离开了普通流。浮动元素之后的块状元素将忽略它并占据它原来的空间。行内元素（文字）会围绕在浮动元素周围。 如果不希望浮动元素对后面的元素产生影响，可以为后面的元素应用“clear”属性。 出现错误 #box1, #box2, #box3, #box4, #box5, #box6, #box7 { float: left; margin: 10px; width: 80px; } #box7 { width: 200px; } #box8 { clear: left; } 20px 20px 20px 20px 4. IE6 浮动元素双倍边界 bug #box1, #box2, #box3, #box4, #box5, #box6, #box7 { float: left; margin: 10px; width: 80px; display: inline; } #box7 { width: 200px; } #box8 { clear: left; } 4. IE6 浮动元素双倍边界 bug IE6.0 错误地将浮动元素与父元素之间的边界加倍，称为 IE 浮动元素双倍边界 bug 。 修复 IE 浮动元素双倍边界 bug 的方法是为浮动元素设置display:inline。 4. IE6 浮动元素双倍边界 bug 5. 浮动的子元素 #father { background: pink; } #son1 { background: yellow; float: right; } #son2 { background: blue; float: left; } #father { background: pink; overflow: hidden; zoom: 1; } #son1 { background: yellow; float: right; } #son2 { background: blue; float: left; } 5. 浮动的子元素 5. 浮动的子元素 父元素不能包含浮动的子元素。 迫使父元素包含子元素的方法是为父元素设置 overflow: hidden; zoom: 1; 。 container header content footer sidebar float: left float: right #sidebar { width: 280px; float: left; } #content { width: 500px; float: right; } #footer { clear: both; } 6. 浮动布局 7. 实现各列等高 在制作两列或三列布局网页时，在视觉上实现各列等高的方法是：制作伪列，即在 container 元素上应用一个垂直重复的背景图像。 #container { background: url(images/bg.jpg) repeat-y; } 第9章 定位布局 1. 定位 position: relative | absolute | fixed 固定定位 绝对定位 相对定位 元素相对于已定位的祖先元素定位。　 position: absolute 元素相对于浏览器视口定位。　 position: fixed 元素相对于它的原始位置定位。　 position: relative 含义 说明 属性值 position: relative; 相对定位是指元素相对于它的原始位置定位。 相对定位元素仍然保留它在文档流中的原始位置。 如果不设置宽度，相对定位元素的宽度保持原来大小。 （1）相对定位 position: absolute; 绝对定位是指元素相对于最近的已定位的祖先元素定位。如果不存在已定位的祖先元素，则相对于浏览器视口定位。 绝对定位元素放弃它在文档流中的原始位置。 如果不设置宽度，绝对定