1.背景介绍
浮动也许具有一个其他属性都不具备的特点，那就是文字环绕。
现如今用到浮动的地方很多，比如CSS的任务1九宫格我就使用了浮动，自适应布局也用到了浮动，让整个页面充满“流动性”,如果宽度不够，浮动元素会自动另起一行，不会溢出让水平滚动条出现。
文字环绕的效果
2.知识剖析
什么是浮动？ 浮动会使元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
2.1 文档流的概念
文档流可能并不是一个准确的说法，但是也不难理解，因为在网页的布局中，基础的布局是自上而下，每个后面的元素都会出现在前面元素的下边。这样一行一行的也就和平时文档的书写差不多了。
2.2 浮动，脱离文档流
通过使用浮动属性，可以使元素脱离文档流，随后可以改变其位置的现象。
2.3 浮动的属性值
浮动的属性值有三个：float：none；float：left；float：right；
浮动不是任意的，其还是在父元素的范围之中，不能脱离于父元素的内容区域。
3.常见问题及为什么要清除浮动
如果我们不给父元素设置高度，我们知道如果它里面的元素不浮动的话， 那么这个外层的高是会自动被撑开的。
若浮动元素比它的父元素还高，那么它就会溢出父元素外面
当内层元素所有浮动后，则影响更大：
（1）背景不能显示
（2）边框不能撑开
（3）高度塌陷等
方法1：父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议父元素高度固定的布局时使用
方法2：
使用clear属性：在相同的父元素中，浮动的子元素之后添加一个空标签，设置样式为："clear：both;"标签可以是div，也可以是p，或者br等块元素。
原理：left 在左侧不允许浮动元素; right 在右侧不允许浮动元素; both 在左右两侧均不允许浮动元素
优点：通俗易懂，容易掌握。
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，一旦代码量大的话，在后期维护中将是噩梦。
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。
方法3：对父元素设置overflow的样式，即overflow: auto/hidden;
原理：必须定义width，在IE6中还需要触发 hasLayout ，例如 zoom：1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：不存在结构和语义化问题，代码量少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，不能和position配合使用，无法显示需要溢出的元素；
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
5.扩展思考
问题: 还有哪些清除浮动的方法？
还有一些方法但是很少用，比如父元素也设置浮动； 父元素设置overflow：auto,但是必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度; 设置display：table;有兴趣的可以去看看这方面的内容，就不多赘述了。
6.参考文献
参考一：CSS清除浮动大全共8种方法
http://www.jb51.net/css/173023.html
参考二：学习CSS布局
http://zh.learnlayout.com/float.html
https://my.oschina.net/leipeng/blog/221125
参考四：CSS清除浮动常用方法小结
http://www.jb51.net/article/13995.htm
7.更多讨论
问题1：float浮动会使元素脱离文档流，那使用position属性的原理进行元素的定位是不是和它是一样使元素脱离文档流呢？假如脱离的话，他们是不是浮动在一个层面上了？
float与position都有脱离文档流的特点，但是position还有z-index属性，可以选择是覆盖还是被覆盖，而float并不能，所以position比float的灵活度更大。
问题2：如果我想让2个<div>水平排列，并且写在html文档下面的那个<div>块在右边，应该怎么操作？
可以在下面的那个<div>块加上float：right属性并且将上下2个<div>换位置，这样的话原来下面的浮动到右边同时脱离文档流，原来上面的就占据文档流并居左了。
问题3：浮动经常用在哪里？
1、 浮动元素会被自动设置成块级元素，相当于给元素设置了display:block（块级元素能设置宽和高，而行内元素则不可以）。 2、 浮动元素后边的非浮动元素显示问题。 3、 多个浮动方向一致的元素使用流式排列，此时要注意浮动元素的高度。 4、子元素全为浮动元素的元素高度自适应问题。
网友评论