网站设计与开发课程 第8章 网页浮动布局 课件.ppt

8.3.6 浮动的子元素 #son1 { float: right; } #son2 { float: left; } #son3 { clear: both; } #box1, #box2, #box3, #box4, #box5, #box6, #box7 { float: left; margin: 10px; width: 80px; } #box7 { width: 200px; } #box8 { clear: left; margin-top: 100px; } 8.3.3 认识浮动 小结：浮动元素 如果让一个元素浮动，它会向左或者向右浮动直至遇到父元素的边缘。如果向同一方向再浮动一个元素，它会浮动直至遇到前一个浮动元素的边缘。 如果向同一方向浮动多个元素，它们将一个挨一个排列，当水平空间无法容纳更多的浮动元素时，浮动元素会换行排列。 浮动元素离开了普通流。浮动元素之后的块状元素将忽略它并占据它原来的空间。行内元素（文字）会围绕在浮动元素周围。 应该为浮动元素设定宽度。如果不设定宽度，浮动元素有宽度最小化的趋势，在不同的浏览器中会有不同的结果。 浮动元素的垂直边距（margin-top、margin-bottom）不会重叠。 小结：清理元素 如果不希望浮动元素对后面的元素产生影响，可以为后面的元素应用“clear”属性。 具有“clear”属性的元素不可以和前面的浮动元素重叠。“clear”属性所带来的清理效果是使元素上方产生空白区域，推动元素向下越过浮动元素。 如果为清理元素设置“ margin-top” 属性，该属性不起作用。因此应避免为清理元素设置 “margin-top” 属性。 IE6 对清理元素的“ margin-top” 属性作出了错误解析。 8.3.4 IE6 浮动元素双倍边界 bug 10px 20px 20px 20px #box1, #box2, #box3, #box4, #box5, #box6, #box7 { float: left; margin: 10px; width: 80px; } #box7 { width: 200px; } #box8 { clear: left; } 出现错误 #box1, #box2, #box3, #box4, #box5, #box6, #box7 { float: left; margin: 10px; width: 80px; } #box7 { width: 200px; } #box8 { clear: left; } 20px 20px 20px 20px 8.3.4 IE6 浮动元素双倍边界 bug 出现错误 #box1, #box2, #box3, #box4, #box5, #box6, #box7 { float: left; margin: 10px; width: 80px; display: inline; } #box7 { width: 200px; } #box8 { clear: left; } 20px 20px 20px 20px 8.3.4 IE6 浮动元素双倍边界 bug #box1, #box2, #box3, #box4, #box5, #box6, #box7 { float: left; margin: 10px; width: 80px; display: inline; } #box7 { width: 200px; } #box8 { clear: left; } 8.3.4 IE6 浮动元素双倍边界 bug 小结： IE6.0 错误地将浮动元素与父元素之间的边界加倍，称为 IE 浮动元素双倍边界 bug 。 修复 IE 浮动元素双倍边界 bug 的方法是为浮动元素设置display:inline。 8.3.5 浮动元素的垂直位置及影响范围 #box2 { width: 80px; float: left; } 8.3.5 浮动元素的垂直位置及影响范围 #box2 { width: 80px; float: left; } 8.3.5 浮动元素的垂直位置及影响范围 #box2 { width: 80px; float: left; margin: 10px; } 8.3.5 浮动元素的垂直位置及影响范围 #box2 { width: 80px; float: left; margin: 10px; height: 300px; } 8.3.5 浮动元素的垂直位置及影响范围 #box2 { width: 80px; floa