CSS之float and clear float
浮动和清除（闭合）浮动
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
在那个“蛮荒”的年代，Float的设计初衷不是为了什么高大上的布局，而仅仅是文字环绕效果。
浮动出现的意义仅仅是让文字来环绕图片而已
那为什么要知道这个呢？明白了float的设计初衷，就可以明白float特有的行为表现了。
2.知识剖析
浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
类似于absolute绝对定位。
2.1 文档流 —— 一个简单的例子
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。
从头到尾按照文档的顺序，该在什么位置就在什么位置。
不浮动
2.2 浮动，脱离文档流
通过使用浮动属性，可以使元素脱离文档流，上浮到文档流之上，随后可以改变其位置的现象。参看下边的图片,浮动的红色块已经上天了，跟黄绿
两个块已经不再一个层面上了。
通过使用浮动属性，可以使元素脱离文档流，上浮到文档流之上，随后可以改变其位置的现象。参看下边的图片,浮动的红色块覆盖了了绿色块。
如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的扣减,如果浮动元素的高度不同,那么下下移动的时候可能被卡住
2.3 浮动的属性值
浮动的属性值有三个：float：none；float：left；float：right；
3.常见问题及为什么要清除浮动
（1）内容被覆盖
（2）边框不能撑开
（3）高度塌陷
（4）如果浮动元素的高度不同,那么向下移动的时候可能被卡住等等。。。
4.解决方案
方法1：父级div定义 height
父级div手动定义height
设置父元素高度
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
方法2：
使用clear属性：在相同的父元素中，浮动的子元素之后添加一个空标签，设置样式为："clear：both;"标签可以是div，也可以是p等块元素。
缺点：可以想象通过此方法，会添加多少无意义的空标签，在后期维护中比较麻烦。
方法3：对父元素设置overflow的样式，即overflow:
auto/hidden;overflow的包裹性使得设置了overflow：hidden属性的div有了高度，同时把图片封在了里面
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，不能和position配合使用，无法显示需要溢出的元素；要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。
据说是最好的方法:after
它就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。
其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，
而after利用其伪类clear:after在元素内部增加一个类似于div.clear的效果(clearfix用在父元素上面)。下面来看看其具体的使用方法：
.div1 {
background:#000080;
border:1px solid red;
}
.div2 {
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left {
float:left;
width:20%;
height:200px;
background:#DDD
}
.right {
float:right;
width:30%;
height:80px;
background:#DDD
}
.clearfloat:after {
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfloat {
zoom:1
}
Left
Right
div2
缺点：使用方式不当会造成代码量增加，初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
5.编码实战
6.扩展思考
还有没有更实用的方法清除浮动？
7.参考文献
参考一：清除浮动的几种方式
参考二：深入理解之float浮动
参考三：css 明白浮动的几种方式
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。
快来与我一起学习吧~http://www.jnshu.com/login/1/21109035
网友评论