Css3之基础-8 Css 浮动（定位，浮动定位）_html/css_WEB-ITnose

一、CSS 定位概述

定位概述

- 定位: 定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

- 普通流定位

- 浮动定位

- 相对定位

- 绝对定位

普通流定位

- 页面中的块级元素框从上到下一个接一个地排列

- 每一个块级元素都会出现在一个新行中(比如

元素、

元素)

- 元素框之间的垂直距离是由框的垂直外边距计算出来的

- 内联元素将在一行中从左到右排列水平布置

- 不需要从新行开始

- 可以使用水平内边距、边框和外边距调整它们的间距

二、CSS 浮动定位

浮动概述

- 浮动定位是指

- 将元素排除在普通流之外，即元素将脱离标准文档流

- 元素将不在页面占用空间

- 将浮动元素放置在包含框的左边或者右边

- 浮动元素依旧位于包含框之内

- 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止

- 经常使用它来实现特殊的定位效果

浮动定位

- 包含框中有三个元素框，如果把框1向右浮动，则它脱离文档流并且向右移动，直到它的右边缘

- 当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘

- 因为框1不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失

- 如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框: 三个框在同一行上显示

- 如果包含框太窄，那么其它浮动块会自动向下移动，直到有足够的空间(左图)

- 如果浮动元素的高度不同，那么当它们向下移动时可能被其他浮动元素"卡住"(右图)

- 浮动元素的外边缘不会超过其父元素的内边缘

- 浮动元素不会互相重叠

- 浮动元素不会上下浮动

float属性

- 如果需要设置框浮动在包含框的左边或者右边，可以通过float属性来实现

- float 属性定义元素在哪个方向浮动

- 在 CSS 中，任何元素都可以浮动

- float: none/left/right;

clear属性

- clear 属性用于清除浮动所带来的影响

- clear: none/left/right/both;

- 定义了元素的哪边上不允许出现浮动元素

’

float 与 overflow

- 包含框内的元素被应用了float之后，包含框的高度会发生变化

- 设置包含框内的overflow属性

总结：本章内容主要介绍了 Css （定位，浮动定位）。

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html5中元素能拉伸宽度吗
• html中怎么清除li黑点
• Css3之基础-8 Css 浮动（定位，浮动定位）...

• 接口与抽象类01
• 类的composer自动加载机制
• composer原理与常用命令03
• composer原理与常用命令02