盒子的浮动与定位ppt课件.ppt

《盒子的浮动与定位ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第14章盒子的浮动与定位盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，直到包含他的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float设置为left或者right，元素就会向其父元素的左侧或者右侧靠紧，同时默认的情况下，盒子的宽度不再是伸展，而是收缩，根据盒子里边内容的宽度来确定。准备页面14-01.htm父div子div子div子div子p未设置浮动，完全按标准流显示设置第1个浮动的div.son1{float:left;}box-2左边框与box

2、-1左边框重合，因为box-1已经脱离标准流，标准流中的box-2会顶到box-1的位置，而文字会环绕box-1排列设置第2个浮动的div14-03.htm将box-2的float属性也设置为left。box-3的左边框仍然在box-1的左边框下边。box-1与box-2均脱离标准流，它们之间的间隙由二者margin构成。设置第3个浮动div14-04.htm将box-3的float也设置为left。改变浮动方向14-05.htm将box-3的float设置为right如果将浏览器调整变窄，box-3将会被挤到下一行中，但仍然保持向右浮动。调整浮

3、动对象14-06.htmbox-1保持向左，box-3左浮动，box-2右浮动。将来浏览器窗口变窄，box-3先被挤入下一行，这是按照HTML书写顺序来决定的。浮动窗口挤入下一行位置修改14-04.htm将3个div均设为左浮动，box-1比box-2略高。调整浏览器变窄，box-3将压入下一行，但会卡在box-1与box-2的高差处。使用clear清除浮动影响14-07.htm为p元素增加左清除{clear:left;}，即这个段落左侧不再围绕着浮动框排列，但仍然受box-3影响。使用clear清除浮动影响14-07.htm如需脱离右方浮动窗口

4、影响，设置{clear:right;}，因为右方box-3较高，脱离了其影响，自然也脱离了box-1和box-2影响。clear属性也可设置为both，同时清楚左右影响。clear属性要放到文字所在的盒子里。不是放在浮动的盒子里的。扩展盒子高度box-1、2、3均浮动，父div中无文字段落，父div范围缩为一条。14-08a.htm一个div的范围是由它里边的标准流内容决定的，与里边的浮动内容无关。要让父div包含3个浮动盒子，可以在3个浮动div后增加一个div实现。14-08.htm.father.clear{margin:0;padding

5、:0;border:0;clear:both;}内部容器水平居中设置外部容器text-align:center会影响子级容器排列不同浏览器支持不同设置自身容器margin:0auto123