盒子的浮动与定位案例.pptVIP

第14章 盒子的浮动与定位 盒子的浮动 在标准流中，一个块级元素在水平方向会自动伸展，直到包含他的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。 CSS中有一个float属性，默认为none，也就是标准流通常的情况。 如果将float设置为left或者right，元素就会向其父元素的左侧或者右侧靠紧，同时默认的情况下，盒子的宽度不再是伸展，而是收缩，根据盒子里边内容的宽度来确定。 准备页面 14-01.htm 父div 子div 子div 子div 子p 未设置浮动，完全按标准流显示 设置第1个浮动的div .son1{ float:left; } box-2左边框与box-1左边框重合，因为box-1已经脱离标准流，标准流中的box-2会顶到box-1的位置，而文字会环绕box-1排列 设置第2个浮动的div 14-03.htm 将 box-2 的float属性也设置为left。 box-3的左边框仍然在box-1的左边框下边。 box-1与box-2均脱离标准流，它们之间的间隙由二者margin构成。 设置第3个浮动div 14-04.htm 将box-3的float也设置为left。 改变浮动方向 14-05.htm 将box-3的float设置为right 如果将浏览器调整变窄，box-3将