EasyDemo*CSS浮动定位(八)

八、浮动定位

1. 定位概述

1.1.1定位概述

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

*普通流定位

*浮动定位

*相对定位

*绝对定位

1.1.2普通流定位

1.2浮动定位

1.2.1浮动概述

*浮动定位是指

-将元素排除在普通流之外

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

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

*浮动的框可以向左或向右移动，知道它的边缘碰到包含框或另一个浮动框的边框为止

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

1.2.2浮动定位

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

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

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

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

*如果包含框太窄，那么其他浮动块会自动向下移动，直到有足够的空间

*如果浮动元素的高度不同，那么当他们向下移动时可能被其他浮动元素”卡住”

1.2.3float属性

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

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

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

*float:none/left/right;

1.2.4clear属性

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

*clear:none/left/right/both;

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