浮动: float 小知识

一、什么是浮动？

首先浮动是CSS中的一个属性，所有主流浏览器都支持float（包括IE），其次它的作用是让元素脱离文档流，块元素水平排列，为什么特指块元素呢？因为内联元素本来就是水平排列的。

二、浮动的属性值：

left ：元素左浮动

right ：元素右浮动

三、浮动的用法：

效果图 : 在有宽高的盒子里面添加float: left;或者float: right; 就可以使盒子向左浮动或者向右浮动. 其实float除了left和right之外还有两个属性值,他们分别是: inherit, none

1. float: inherit;

这个属性一般没有人用，因为所有IE都不支持这个属性值，基本是不能使用的.

1. float: none;

这个是浮动的默认值，即为不浮动，用得比较少，一般在你需要覆盖别人的样式时可能会用到。

四、浮动带来的后果：

浮动除了让块元素水平排列之后，还有造成我们元素的一些变化，我们也需要清除

1.浮动改变了块元素的宽度

在没有添加浮动的时候，每个div都占据一整行，如果没有指定div的宽度，div的宽度将会占满一整行 那在没有指定宽度的情况下，添加浮动会怎么样呢？结果就是宽度为0了.所以说,当元素添加浮动属性后，宽高如果不指定，宽高就由内容撑开。

2、脱离文档流

脱离文档流可以理解为元素进行了z轴的位移，网页是个立体结构，除了横竖方向的xy轴外，还存在面向我们的z轴，浮动元素在z轴上移一层，那么原来所在的层级就空了出来，所以排列在后面的元素会占据浮动元素的前面，被浮动元素遮挡。

3、内联元素添加浮动后，拥有块级元素的特性

块级元素添加了浮动后，有了display: inline-block;的特性，比如：不占据一行、宽高根据内容变化、可以定义宽高等

而内联元素同理，也有了display: inline-block;的特性，比如可以定义宽高

写了这么多浮动的问题,最后再告诉大家如何清除浮动带来的问题

五、清除浮动

    1.给父元素设置高度(有些场景不方便设置高度 例如新闻列表 京东为您推荐)
    2.额外标签法(在父元素内容最后添加一个块级标签,然后再设置clear:both)
    3.单伪元素(其实就是额外标签法升级版本 京东采用的就是单伪元素)
    4.双伪元素(小米就是采用双伪元素)
    5.给父元素设置overflow: hidden;

这个知识点到这里就分享完啦,希望能帮助到需要的人