第七章 盒子的浮动与定位.pptVIP

第七章 盒子的浮动与定位 第七章 盒子的浮动与定位 ? CSS 有三种基本的定位机制：普通流、浮动和定位。 ? 除非专门指定，否则所有框都在普通流中定位。也就是说， 普通流中的元素的位置由元素在HTML中的位置决定。 ? 在下面的章节，我们会为您详细讲解： 浮动、定位 第七章 盒子的浮动与定位 ? 浮动 ? 浮动的框可以向左或向右移动，直到它的外边缘碰到包含 框或另一个浮动框的边框为止。 ? 由于浮动框不在文档的普通流中，所以文档的普通流中的 块框表现得就像浮动框不存在一样。 第七章 盒子的浮动与定位 值 left right none 描述 图像或文本浮动在父元素的左边。 图像或文本浮动在父元素的右边。 图像或文本浮动显示在它在父元素中出现的位置。 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本 围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成 一个块级框，而不论它本身是何种元素。 如果浮动某元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 第七章 盒子的浮动与定位 ? 准备代码,如图所示： 这是标准流布局方式，下面进行浮动试验。 第七章 盒子的浮动与定位 ?