CSS--浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

浮动的盒子只会影响后面的盒子，不会影响前面的盒子

语法：选择器{float:属性值;}

属性值：none(没有) left(左浮动) right(右浮动)

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

如果图像是左浮动（float:left)，下面的文本流将环绕在它右边。

如果图像是右浮动(float:right)，下面的文本流将环绕在它左边。

如果把几个浮动的元素放到一起 空间足够的话，它们将彼此相邻。

浮动的特征：

所有标签同排显示

支持所有css的样式

元素脱离文档流

默认内容撑开高度

浮动元素具有行内块元素的特点

清除浮动

清除浮动不是真的把浮动清除，而是清除加了浮动带给后面的标流的影响。

如果子盒子是标准流，因为标准流占有位置，所以父亲能检测到高度。

子盒子浮动了，不占有位置，又因为父亲高度为零；所以父亲检测不到高度。

清除浮动的本质

清除前面的盒子设置浮动后，带给后面盒子的影响。

什么时候清除浮动

当影响后面的盒子时 父级没有高度时

如何清除浮动

在父级添加overflow：hidden；

在父级添加after伪类元素

在父级添加双为元素

语法:选择器{clear:属性值；} 属性：left不允许左侧有浮动，right不允许右侧有浮动 ,both清除两侧