css之盒子的浮动与定位

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

1、CSS之盒子的浮动与定位一、盒子的浮动在标准流中，一个块级元素会自动伸展，直到包含它的元素的边界。CSS中有一个float属性，默认为none，即标准流通常的情况。如果将float属性设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时，盒子的宽度不再伸展，而是根据盒子里内容的宽度来决定。准备代码先制作一个基础的页面，来演示浮动的效果。实例：float01.html实验一设置第1个浮动的div实例：float_son1.html观察结果注意：box-2的左边框与box-1的左边框是重合的，而box-2中的文字会围绕着box-1

2、排列。实验二设置第2个浮动的div实例：float_son2.html观察结果注意：box-3的左边框与box-1的左边框是重合的。实验三设置第3个浮动的div实例：float_son3.html观察结果实验四改变浮动的方法实例：float_right.html观察结果实验五再次改变浮动的方向实例：float_right_left.html观察结果提示：通过CSS布局，可以在HTML不做任何改变的情况下，调换盒子的显示位置。实验六全部向左浮动实例：float_all_left.html（在BOX-1中增加一行）观察结果实验七使用clear属性

3、清除浮动的影响实例：float_clear_left.html实例：float_clear_right.html观察结果注意：对clear属性的设置要放在文字所在的盒子里，而不要放到对浮动盒子的设置里面。实验八扩展盒子的高度实例：float_box_height.html观察结果说明：包含浮动DIV的容器不会适应高度。一个DIV盒子的高度是由它里面的标准流内容决定的，与里面的浮动内容无关。改进：float_box_height_new.html一、浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在

4、文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。二、盒子的定位定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。通过使用position属性，我们可以选择4种不同类型的定位：Static、relative、absolute、fixed2.1static静态定位元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。实例：（两个没有设置Position属性的盒子）no_position.html2.

5、2relative相对定位relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。说明：通过left或right属性指定其水平偏移量，通过top或bottom属性指定其垂直偏移量。通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。实例：relative_position.html说明：当子块使用相对定位以后，即使移动到了父盒子的外面，父盒子也不会变大。2.2relative相对定位2.2relative相对定位结论：使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。使用相

6、对定位的盒子仍在标准流中，它对父亲和兄弟盒子都没有任何影响。即使对浮动的盒子使用相对定位，作用也和上面描述的一致。2.3绝对定位absolute设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。2.3绝对定位absolute准备实例：absolute_position.html绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对

7、定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。2.3绝对定位absolute2.3绝对定位absolute实例：absolute_position_1.html说明：使用绝对定位的盒子是以它的最近的一个已经定位的祖先元素为基准进行偏移。如果没有已经定位（只要该盒子的position属性不是static，并且已经被设置）的祖先元素，则以浏览器窗口为基准进行定位。2.3绝对定位absolute实例：absolute_position_2.html观察结果：将父块的定位设置为relative;说明：绝对定位的框从标

8、准流中脱离，它对其后的兄弟盒子的定位没有影响。2.3绝对定位absolute特殊性质：如果绝对定位的盒子没有设置某个偏移量，则该方向坐标保持不变。即维持原来的位置。