CSS——灵活布局 float (浮动属性)

目录

浮动概述

浮动定位

float属性

clear属性

float与overfloat

第一部分

1. 浮动概述

浮动定位是指(特点)

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

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

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

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

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

第二部分

2. 浮动定位

请看上图，左边的三个框是在标准文档流中，由于自身都是块级元素（独占一行）所以是之上而下排列的，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘；这边由于浮动元素不占用页面空间，所以框2、3往上移动。



再请看上图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。



如上图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

要注意以下几点：

1、 浮动元素会被自动设置成块级元素，相当于给元素设置了display:block（块级元素能设置宽和高，而行内元素则不可以）。

2、 浮动元素后边的非浮动元素显示问题。

3、 多个浮动方向一致的元素使用流式排列，此时要注意浮动元素的高度。（最后一幅图所示的特殊效果）

4、子元素全为浮动元素的元素高度自适应问题。（三种方法来解决）

第三部分

3. float属性

值	描述
默认值：	none
继承性：	no
版本：	css1
JavaScript：	object.style.cssFloat=”left”

可能的值：

left	元素左浮动
right	元素右浮动
none	默认值。元素不浮动，并且会显示在其在文本中出现的位置
inherit	规定应该从父元素继承float属性的值

注释：浏览器的支持性：所有主流浏览器都支持float属性

第四部分

4.clear属性

定义和用法：

clear 属性规定元素的哪一侧不允许其他浮动元素。如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动
none	默认值。允许浮动出现在两侧
inherit	规定应该从父元素继承clear属性的值