05. CSS 浮动
浮动图文解析
浮动的特性
清除浮动
浏览器的兼容性问题
在 CSS 中，通过 float 属性来实现元素的浮动。
浮动会使使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。
float:left; // 左浮动
float:right; // 右浮动
一、浮动图文解析
(1) 标准流
(2) div2 左浮动
-
div2 将脱离标准流，但div1、div3、div4仍然在标准流当中
-
div3会自动向上移动，占据div2的位置，div1、div3、div4依次排列，重新组成一个流。
-
因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次
(3) div2、div3 左浮动
-
div2、div3 将脱离标准流，但 div1、div4 仍然在标准流当中
-
div4 会自动上移，与 div1 组成一个“新”标准流，而 div3 会跟随在 div2 之后
-
浮动是漂浮在标准流之上，因此 div2 又挡住了 div4
div2在每个例子中都是浮动的，但并没有跟随到div1之后。因此，我们可以得出一个重要结论：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
(4) div2、div4 左浮动
-
div2、div4 将脱离标准流
-
div3 将会自动上移，与 div1 组成新标准流
-
div2 上一个元素 div1 是标准流中的元素，因此 div2 相对垂直位置不变，与 div1 底部对齐。
-
div4 上一个元素 div3 是标准流中的元素，因此div4的顶部和div3的底部对齐， 并且总是成立的，因为从图中可以看出，div3上移后，div4也跟着上移，div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐。
浮动的特殊情况：如果有浮动元素的高度大于换行的那个元素，那么当换行元素换行时会被高的那个元素“卡住”
浮动对文字的影响：文本围绕浮动框
二、浮动的特性
① 块级元素可以横排显示
② 行内元素可以设置宽度和高度
③ 元素没有设置宽度和高度时，宽度为内容撑开宽
④ 支持margin
⑤ 脱离文档流
⑥ 提升半层级（和内容一个层级，所以外边的内容就会围绕它）
问题：不支持margin:auto;
三、清除浮动
元素浮动之后，周围的元素将重新排列，浮动元素之后的元素会围绕它，为了避免这种情况，可以使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。 clear : none | left | right | both
简单理解：div1、div2 左浮动
要想让 div 下移，就必须在 div2 的 CSS 样式中 clear:left/both 来指定 div2 元素左边/左右两边不允许出现浮动元素，这样 div2 就被迫下移一行。如果在 div1 的 CSS 样式中清浮动是没有用的，因为它只会作用在 div1 中，不会影响 div2。
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
深入理解：
创建一个父级div，并设置border属性，然后下边创建两个子元素span，并设置浮动。具体代码如下所示：
解决方法：
(1) 给父级元素单独定义高度（height）
原理：如果父级元素没有定义高度，父元素的高度完全由子元素撑开时，父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响。
(2) 在标签结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，不利于页面的优化
(3) 父级div定义 伪类:after 和 zoom （推荐使用）
原理：元素生成伪类的作用和效果相当于方法2中的原理，但是IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题，写法是固定的，不理解也可以直接复制使用；（小编大力推荐使用此种方法，简单便捷，只需添加一个class即可解决问题）
缺点：css代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
(4) 父级div定义 overflow:hidden
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。（不建议使用此种方式，可能会影响页面元素布局）
四、浏览器的兼容性问题
(1) 微型盒子
IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看着都比较大，所以 IE 6不支持微型盒子。
举个例子，我们设置一个 height:5px 、width:200px 的盒子，看下在IE 8和 IE 6中的显示效果：
解决办法很简单，就是将盒子的字号大小，设置为小于盒子的高，比如，如果盒子的高为5px，那就把font-size设置为0px(0px < 5px)。如下：
height: 5px;
_font-size: 0px;
浏览器hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。
IE6留了一个后门：只要给css属性之前，加上下划线，这个属性就是IE6的专有属性。
比如说，我们给背景颜色这个属性加上下划线，就变成了 _background-color: green; 效果如下：
于是乎，为了解决微型盒子（即height小于12px）的问题，正确写法：（注意不要忘记下划线）
height: 10px;
_font-size:0;
(2) IE6 不支持用 overflow:hidden;来清除浮动
解决办法，追加一条：
overflow: hidden;
_zoom:1;
实际上，_zoom:1;能够触发浏览器 hasLayout 机制。这个机制，不要深究了，因为只有IE6有。我们只需要让IE6好用，具体的实现机制，可以自行查阅。
需要强调的是，overflow:hidden; 的本意，就是让溢出盒子的 border 的内容隐藏，这个功能是IE6兼容的。不兼容的是 overflow:hidden; 清除浮动的时候。
(3) 浮动中和margin相关的知识
① margin塌陷：
标准文档流中，竖直方向的margin不叠加，是以较大的为准(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示：
如果不在标准流，比如 div2 浮动了，那么两个盒子之间是没有塌陷现象的。
② IE6 双倍margin的bug：
当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素，会双倍marign。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
解决方案：
（1）使浮动的方向和margin的方向，相反。
- 所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。
float: left;
margin-right: 40px;
（2）使用hack：（没必要，别惯着这个IE6）
- 单独给队首的元素，写一个一半的margin：
<li class="no1"></li>
ul li.no1{
_margin-left:20px;
}
③ IE6的3px bug
浙公网安备 33010602011771号