CSS3样式表- 定位.pptx

单元二 CSS3样式表网计技页术设任务七 定位31绝对定位浮动2相对定位盒子的浮动在标准流中，一个块级(block)元素在水平方向上会自动伸展，直到其父元素的边界；而在垂直方向上和兄弟元素依次排列，不能并排。CSS中的float属性，默认值为none，也就是不浮动。如果将float设置为left或者right，元素就会向其父元素的左侧或者右侧靠紧，直至碰到父元素的边缘或者碰到另一个浮动的盒子。同时默认情况下，盒子的宽度不再伸展，而是根据盒子里的内容宽度来确定。浮动元素会生成一个块级框，即使原来是一个inline元素，设置了浮动属性后也会变成块级。1浮动1浮动Box-1覆盖在Box-2的上面，不再伸展。红色区域是Box1的范围Box-2占据了Box-1的位置，但是文字会环绕Box-1第一个div脱离标准流，向左浮动，直至碰到其父元素边缘第一个盒子向左浮动1浮动红框是Box-1,蓝框是Box-2,绿框是Box-3。Box-1和Box-2盖在Box-3的上面，1和2之间的距离是它们的margin前两个盒子向左浮动1浮动Box3也向左浮动，直到它碰到前一个浮动框，停下。P占据了原本box3的位