大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。
1.背景介绍
浮动是怎么诞生的？浮动最初设计的目的并没那么多事儿，就只是用来实现文字环绕效果而已。
但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在， 在inline-block出来之前，浮动大行其道。直到inline-block出来后，浮动也有它自己独特的使用场景。
2.知识剖析
浮动到底是什么？ 浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。请默念3次！提到文档流，那 下面我们讲讲什么是文档流。
2.1 文档流的概念
文档流是文档中可显示对象在排列时所占用的位置。
将窗体自上而下分成一行行显示，并在每行中按从左到右的顺序排放元素的效果，就是文档流直观的表现。
2.3 浮动的属性值
浮动的属性值有三个：float：none；float：left；float：right；
浮动不是任意的，其还是在父元素的范围之中，不能脱离于父元素的内容区域。
我们回到前面那个页面看看，浮动元素能不能浮动到父元素外面去
3.常见问题及为什么要清除浮动
如果我们不给父元素设置高度，我们知道如果它里面的元素不浮动的话， 那么这个外层的高是会自动被撑开的。
若浮动元素比它的父元素还高，那么它就会溢出父元素外面，点我看浮动元素溢出
当内层元素所有浮动后，则影响更大：
（1）背景不能显示
（2）边框不能撑开
（3）高度塌陷等
4.解决方案
方法1：父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议父元素高度固定的布局时使用
方法2：
使用clear属性：在相同的父元素中，浮动的子元素之后添加一个空标签，设置样式为："clear：both;"标签可以是div，也可以是p，或者br等块元素。
原理：left在左侧不允许浮动元素; right在右侧不允许浮动元素; both在左右两侧均不允许浮动元素点我使用clear属性
优点：通俗易懂，容易掌握，适合菜鸟前期使用。
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，一旦代码量大的话，在后期维护中将是噩梦。
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。
方法3：对父元素设置overflow的样式，即overflow: auto/hidden;
原理：必须定义width，在IE6中还需要触发 hasLayout ，例如 zoom：1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，不能和position配合使用，无法显示需要溢出的元素；
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
5.编码实战
6.扩展思考
还有哪些清楚浮动的方法
7.参考文献
参考二：学习CSS布局
参考四：CSS清除浮动常用方法小结
8.更多讨论
讨论点：float浮动会使元素脱离文档流，那使用position属性的原理进行元素的定位是不是和它是一样使元素脱离文档流呢？假如脱离的话，他们是不是浮动到同一个层面上了？
鸣谢
感谢大家观看
同时也感谢：胡嘉杰师兄，高峰师兄的指点
课后问答：
问：伪元素是什么？
伪元素是相对于元素的说法，用于向某些选择器设置特殊效果。
问：伪类的使用规则？
答：菜鸟和w3school讲的很清楚http://www.w3school.com.cn/css/css_pseudo_classes.asp
问：为什么说设定父元素定高很low？
特别是动态页面中，浮动的子元素个数是会发生变化的，定高的父元素并不能满足要求，最终还是会出现子元素溢出的。
ppt链接：https://ptteng.github.io/PPT//PPT/css-01-float-clear-yg.html#/
视频链接：视频密码：q0jj
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
