浮动的介绍和问题解决

前言

浮动是我们布局中经常会用到的属性，但是我们用了它的以后，后面可能会出现一些问题。

---

一、浮动是什么？

浮动是float，它的值有left（左浮动），right（右浮动），none（不浮动）和inherit（继承父元素的浮动），其中inherit不常用，主要使用的是前面三个。

二、浮动怎么使用？

一般用于元素在一行排列，float：left；向左边横排对齐，从左边开始一个一个按顺序排列。   float：right；向右边对齐，它是从右边开始一个一个按顺序排列。

                比如：本来有a b c d e f g 这几个元素是竖着排列的 ，这些元素都float：left；之后会靠左横着排列成 abcdefg；如果都float：right；这些元素会靠右横着排列成 gfedcba；   float：none;一般用来取消前面带来的浮动。 

用了position：absoulte;的元素使用float没有效果。

三、浮动使用了之后会有什么后果？

浮动使用了之后会使元素脱离文档流，

如果容器空间足够，它下面的 行内元素或者与行内元素有相关特性的元素 和文字会跟上来排在它的右边。

如果是 块元素或者与块元素有相关特性的元素 会直接出现在浮动元素的底下，被浮动元素挡住。         如果该元素里有内容，如果该元素比浮动元素大，内容会出现在浮动元素右边 ，内容不会被浮动元素挡住，并且会围绕着浮动元素排列。                                                                                           如果该元素宽度不够大，它就会出现在浮动元素下方，甚至超出盒子。 

四、怎么解决这些问题？

1.让父盒子触发BFC。让浮动元素参与高度计算。 比如加overflow：hidden；

2.清除浮动，子元素用了浮动，父盒子一定要清除浮动！                                                                      清除浮动的常用办法：   .clearfix{content:'';display:block;clear:both;}   然后把clearfix这个类名加入父元素中。