简单说一下浮动

简单说一下浮动float

1.浮动最早是用来解决文字环绕图片效果的。

2.大家都知道块级元素在正常文档流中是独占一行的，无论他的宽度是多少，他也不会允许其他元素和他在同一行显示，就这么霸气。

然而实际的排版是需要我们能够实现在一行显示多个div或者其他块元素的，显然在标准文档流里我们是没有办法做到的，这时候就需要我们使用浮动float了
3.浮动会使某个元素脱离正常的文档流，漂浮在标准流之上，和标准流不在一个层级。
现在我们给div3设置左浮动看看会出现什么效果：
从图中可以看到div3和div4在同一行显示了，这是为什么呢？
这是因为div3设置了浮动，他就脱离了正常的文档流，他原来的位置便空了出来，这时候div4就顶上去了。也就是说他们不在一个平面了，div3的层级更高。你可以理解为div3透过屏幕离你更近了，div4钻到了他的下面。

高度塌陷
凡事有利就有弊，float解决了排版的问题当然也会出现一些小问题：

如上图，我们知道如果父元素没有设置高度的话，他的高度会由他的子元素决定，由子元素撑开。

可见代码中我给父级wrapper的两个子元素设置的高度是100px；
正常情况应该是wrapper的高度也是100px，但是在控制台显示父级wrapper的高度却是0，这就是我们所说的高度塌陷。

wrapper里面的两个div我给他们分别设置了左右浮动，而浮动元素会脱离正常的文档流，两个子元素就会和他们的父元素不在一个层级，这会导致他的父级找不到包不住他们了，因此也就无法撑开父级，父级wrapper因此便没有了高度。

清除浮动

在排版布局的时候，最好用一个父元素把需要浮动的元素包起来，这样不会对后面的结构产生影响，清浮动的时候在父级设置就好了

   clear : none | left | right | both

   取值：

   none  :  默认值。允许两边都可以有浮动对象

   left   :  不允许左边有浮动对象

   right  :  不允许右边有浮动对象

   both  :  不允许有浮动对象

清除浮动的方法有很多，在这里推荐一种万能方法，利用伪元素after的方法，这种方法不会产生多余的html结构也没有任何副作用。

先定义功能，再定义结构
这是一个很实用的思路和方法，如上图所示先把清浮动的css代码写好，给一个class名，哪里需要就在哪里添加，美滋滋。