前端面试题------float的原理及在平时工作中遇到的float带来的缺陷

float是css布局中重要的属性可以实现多列布局，定位等，float与绝对定位一样，都可以实现定位布局，但是float虽然已经脱离了文档流，但是他还会占据文档的位置，绝对定位就和他的名字一样，绝对的脱离了文档流，w3c上对于float的定义是这样的：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

设置有float的元素高度本身并没有被破坏，高度被破坏的是包裹浮动元素的父元素，即浮动元素的父元素高度被破坏了

补充：设置有float的li元素高度并没有被破坏，只是ul的高度被破坏了

float造成的效果其实有2个：

1、使元素本身变成了类似于inline-block的元素；

2、使包裹它的父元素忽略的它的高度，即父元素没有了高度；

缺陷：高度塌陷

产生原因：在目前的CSS的世界中，所有的高度都是有两个CSS模型产生的，一个是box盒状模型，对应CSS为”height+padding+margin”，另外一个是line box模型，对应样式为”line-height”。前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起作用，即使您看不到”height”这个词。而后者针对于文字等这类inline boxes的元素（图片也属于inline boxes，但其height比line-height作用更凶猛，故其inline boxes高度等于其自身高度，对line-height无反应），inline boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个原因），而真正的高度表现则是由每行众多的inline boxes组成的line boxes（等于内部最高的inline box的高度），而这些line boxes的高度垂直堆叠形成了containing box的高度，也就是我们见到的div或是p标签之类的高度了。所以，对于line box模型的元素而言，没有inline boxes，就没有高度了，而浮动却恰恰做了这么龌龊的事情，其直接将元素的inline boxes也破坏了，于是这些元素也就没有了高度。

解决方法：

父元素增加overflow:hidden