最近研究清除浮动和布局相关的问题，感觉概念很多很杂，而且这些东西经常用到，今天才有时间来好好整理一下不懂的和懂得，来把他们一起结合起来看。
浮动元素与absolute
了解下float的起源和现状
浮动早期是用来文字环绕的，文字环绕图片。
至于为什么浮动能做自适应，环绕图片?
这里我们可以看看张鑫旭博客的例子，当图片和文字排列在一起的时候，他们自我形成了很多line box，而利用浮动就能破坏这些line box，具体参见css两种模型，其实归根结底文字环绕的原理也是破坏这些line box。所以当我们设置float left的时候会碰到一个常见的问题，那就是高度塌陷的问题，父元素并没有了高度，因为浮动的元素并没有高度，所以父元素没高度。这时候清除浮动就派上用场了。可以说我们是一边享受着浮动带给我们的便利，一边还要承担它的后果，只是因为我们使用的场景有问题，那么问题来了，有没有一劳永逸的办法呢。
css两种模型
在目前的css世界中，所有的高度都是由两个css模型产生的，一个是box盒状模型，对应css为“height+padding+margin”,另一个是line box模型，对象样式为line-height。前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起作用，即使看不到"height“这个词。而后者针对于文字等这类inline boxes的元素（图片也属于inline boxes,但其height比line-height作用更凶猛，故其inline boxes的高度就等于其自身的高度，对line-height无反应），inline boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个原因），而真正的高度表现则是由每行众多的inline boxes组成的line boxes(等于内部最高的inline boxes),而这些line boxes的高度垂直堆叠形成了containing box的高度，也就是我们见到的div或p标签之类的高度。所以对于line box模型的元素而言，没有inline boxes,就没有高度了，而浮动恰恰是将元素的inline boxes破坏了，于是这些元素就没有高度了。
height与line height
这里额外提到一个知识点，关于line box的heigt与line height，可以看到当把文字的line height设置为0，没有了height，而拥有line height，文字size设置为0，height确实存在的，证明决定高度的在于这个line height，一般来说我们设置heght与line height一样即可是垂直居中（实际并不需要heigt），就是这个道理。关于这两个属性还需提到的就是line height不会使用haslayout，而height会使用haslayout,line height能让文字自适应，而height 是block，占满一行。
为什么文字环绕图片不用清除浮动，而布局需要？
一句话，因为元素环绕（例如文字），其自身是含有inline boxes高度的，这是inline水平的元素形成高度的基础，所以，虽然浮动元素没有高度，但是其周围环绕的元素是有高度的，只要环绕元素比浮动元素高度高，父标签无高度的问题自然也就没有了，但是纯粹一堆浮动元素会有高度吗？没有。
display absolute与float left的比较
两者区别在与包裹性，即一个脱离了文档流，而另一个依然在文档流中，还是回到文字包裹图片，他还是占据了位置，但是absoulute却像一个世外高人， 与世无争了。
能与float实现相同效果的属性介绍
display inline-block
float left可以看到，虽然功能强大，但是实际上它的诞生并不是为了布局的，这里我们可以使用另一种方式display inline-block的方式来进行布局，缺点在于要清除间隙。
在这里提一下BFC，我刚入门也被这几个搞混了，overflow hidden，display inline-block，float等等都能实现浮动，那到底有何区别呢。
BFC元素简介和基本特性
元素内部无论怎么变化不影响外部。BFC元素margin不相互叠加和清除浮动都是基于此点。
触发BFC条件
float的值不为none。
overflow的值为auto,scroll或hidden。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
bfc按我的理解是独立出来一个区域，这个区域只有满足bfc触发条件才会进入，是与普通文档流互不冲突的一个区域。
https://www.zhihu.com/question/21985587
http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
https://zhuanlan.zhihu.com/p/25321647
https://www.w3.org/TR/CSS2/visuren.html#positioning-scheme
注：按顺序观看最好
网友评论