我们在日常开发布局中经常会使用到流体布局，流体布局用到的一个最重要的属性就是浮动，今天就来看看浮动的相关知识。
1）.什么是浮动？
float即为浮动，在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。
文档流：在html中文档流即为元素从上至下排列的顺序。
脱离文档流：元素从正常的排列顺序被抽离。
最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）。
2）.为何要清除浮动？
要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动。
a.普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做 普通流（normal flow)，或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow（普通流） 这一词，从来没出现过document flow（文档流）.
b.浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？
很多人都已经习惯称之为清除浮动，但是确切地来说是不准确的。
1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。
其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决wrap高度塌陷的问题。
有哪些清除浮动的方法？
1）父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
2）添加额外标签
原理：添加一个空div，通过在浮动元素末尾添加一个空的标签例如 div style="clear:both" ，其他标签br等亦可，让父级div能自动获取到高度
优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。
3）父元素设置 overflow：hidden
原理：必须定义width，在IE6中还需要触发 hasLayout ，例如 zoom：1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，不能和position配合使用，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致IE中中键失效，按鼠标中键时，那个上下滚屏箭头不会出现
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
4）使用:after 伪元素
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。需要注意的是 :after是伪元素，不是伪类
.clearfix:after {content:" "; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
优点：结构和语义化完全正确,代码量居中。浏览器支持好、不容易出现怪问题（bootstrap用的也是这种方法）
缺点：复用方式不当会造成代码量增加，初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。
5）父元素设置 overflow：auto 属性
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
6）父元素也设置浮动
原理：所有代码一起浮动，就变成了一个整体
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body
建议：不推荐使用，只作了解。
7）父元素设置display:table
原理：将div属性变成表格
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失
建议：不推荐使用，只作了解
小结
通过对比，我们不难发现，其实以上列举的方法，无非有两类：
其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个空格的table元素；
其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。
在CSS2.1里面有一个很重要的概念，但是国内的技术博客介绍到的比较少，那就是 Block formatting contexts （块级格式化上下文），以下简称 BFC。
CSS3里面对这个规范做了改动，称之为：flow root，并且对触发条件进行了进一步说明。
那么如何触发BFC呢？
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block)
position（absolute，fixed）
fieldset元素
BFC的特性：
1)块级格式化上下文会阻止外边距叠加
当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
2)块级格式化上下文不会重叠浮动元素
根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。
由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用
如何使一个浮动元素垂直居中？
给父元素设置display: table-cell 和vertical-middle 即可。
网友评论