CSS深入——深入理解之float浮动
本文学习来至慕课网 https://www.imooc.com/learn/121 感谢老师分享！
历史：float浮动设计初衷是为了文字环绕效果。
包裹与破坏，争强浮动的感性认知。
浮动特性包裹有下面三种表现行为：
- 收缩--本来父级水平在外面，之后将子级包裹在其中，收缩的尺寸与子级元素基本相同
- 坚挺--原本没有高度，之后父级高度变成子级相同的高度。
- 隔绝--里面的子级发生了任何事情，对外面没有任何影响，江湖人称BFC（块级格式化上下文）
破坏：
添加float后，容器的高度就没有了，表现为父元素的高度塌陷，称之为容器被破坏。
浮动是魔鬼——无宽度、无图片、无浮动
问题：为什么浮动会带来破坏？
被误解的float
众所周知：浮动具有破坏性，会让父级元素高度塌陷。
需要知道的是：浮动使父级元素高度塌陷不是bug，而是标准。其实当初为了让CSS造成文字环绕的效果，才会破坏父级。
所以可以理解为，原本父级包含子级，而文字只能在子级下方，当float产生后，父级塌陷，文字就会上移，进而文字环绕子级。
破坏步骤：
- 浮动产生后，破坏父级。
- 浮动具有偏移性，所以自己靠边，文字聚集在一起，造成环绕。
结论：
浮动的破坏性只是单纯的为了实现文字环绕效果！因此——父容器塌陷根本就不是bug，而是特性使然。
问题：如何降低浮动破坏性造成的影响？
清除浮动
清除浮动是简称，全称为：清除浮动带来的影响。
清除浮动的方法：
clear 在底部添加 clear:both 在外界还是有接触
BFC/haslayout BFC是高级浏览器特有的，haslayout是ie独有的，是内部的，不对外界接触。
1.HTML block 水平元素底部走起 - <div …></div>
2.CSS after 伪元素底部生成 - .clearfix:after {}
不足
1. div元素 – 很多裸露的div标签看上去好讨厌！
2. after伪元素 – IE6/IE7: 你哪位？你妈贵姓？也就是人家不认识这个伪类元素。
所以可以用：
.clearfix:after { content: ''; display: block; height: 0; overflow: hidden; clear: both; } /*其他浏览器这么用*/
.clearfix { *zoom: 1; } /*ie6/ie7 这么用*/ *zoom:1 有些浏览器是无用的
更好的方法：
.clearfix:after { content: ''; display: table; clear: both; }
.clearfix { *zoom: 1; }
注意：.clearfix应用在包含浮动子元素的父级元素，父级元素，父级元素（重要的事说三遍）上。不要滥用！
否则，乱入的haslayout往往会让IE6/IE7做出出格的事情！
float的滥用
1.浮动让元素block块状化（砖头化）；
2.浮动破坏性造成的紧密排列特性（去空格化）；
砌砖布局的问题
1.容错性比较糟糕，容易出问题
2.这种布局需要固定尺寸，很难重复使用
3.在低版本的ie浏览器下，会有很多问题
问题：那怎样才能借助浮动实现流体布局呢？
浮动与流体布局
......
