css浮动属性float详解_每日一课｜web前端CSS浮动float的使用

1、 Float

1、 浮动的定义

Float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

CSS 的 Float(浮动)使元素脱离文档流，按照指定的方向(左或右发生移动)，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

【实例1-1】

效果如下：

2、 浮动的原理

(1) 浮动以后使元素脱离了文档流(在页面中不占据位置)

(2) 浮动是碰到父元素的边框或者浮动元素的边框就会停止

(3) 浮动不会重叠

(4) 浮动只有左右浮动，没有上下浮动

(5) 浮动以后块级元素在同一行显示，行内元素可以设置宽高

(6) 元素没有设置宽度和高度时，宽度为内容撑开

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

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

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

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

3、 浮动的语法

4、 清除浮动的影响

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，浮动元素会造成父元素高度塌陷。

【实例1-2】

子元素.one没加浮动时的样式如下：

父元素高度由子元素撑开

给子元素设置浮动后效果如下：

所以当我们设置float后，要根据不同情况来清除浮动。下面介绍几种常用的方法：

(1) 设置父布局的高度

设置父标签合适的高度，前提必须确定子布局的高度，来计算父布局的合适高度，包裹住子布局。

【实例1-3】

(2) 受影响的元素加clear属性

clear:left | right | both;

【实例1-4】

清除浮动之前，由于box的三个子元素都加了浮动，排除到文档流之外，box的高度坍塌，所以下面的div被覆盖住了。

给受影响的div加clear，清除浮动的影响

清除完效果如下：

(3) overflow清除浮动

这种情况下，父布局不能设置高度。 父级标签的样式里面加: overflow:hidden;

【实例1-5】

效果如下：

(4) 空div法

在最后一个浮动的盒子的后面，新添加一个标签。然后设置clear清除浮动。 这种情况下，父布局不能设置高度。

优点： 通俗好理解。 缺点： 增加了太多的标签。

【实例1-6】

(5) 伪对象发

为父标签添加伪类After,设置空的内容，并且使用clear:both; 这种情况下，父布局不能设置高度。

优点： 无需添加多余的标签，并且可以全局调用。

【实例1-7】