关于清除浮动(BFC),float和inline-block

BFC(块级格式化上下文)：http://kayosite.com/block-formatting-contexts-in-detail.html

1、BFC 会阻止外边距折叠

2、BFC 可以包含浮动的元素

3、BFC 可以阻止元素被浮动元素覆盖

4、IE6、7不支持BFC，可以使用zoom：1触发hasLayout

 

文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。
水平位置（Horizontal position）：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。

垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。

空白（Whitespace）：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴。

IE6和IE7：IE6、IE7对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下。
给父元素设置font-size:0;letter-spacing:-3px;(兼容IE6/7)：不管空白多大，由于空白跟font-size的关系，设置这个属性即可把空白的宽度设置为0.在实际使用的时候，你还需要给子元素重新设置font-size。
什么时候使用inline-block，什么时候使用float。
什么时候使用，取决于你的设计稿跟解决方法。如果你需要文字环绕容器，那浮动是不二选择。如果你需要居中对齐元素，inline-block是个好选择。
最终，这可以归结为float跟inline-block的两种属性作用后的区别，你需要对其作出选择。

 

使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。
使用浮动：当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。
若父元素中的图片等高，设置浮动就会工作正常。但一旦有一列图片比较高时，图片的排列就会出现问题。这是因为浮动后，图片脱离了文档流。
而inline-block由于未脱离文档流，不会出现这个问题。如果你想再创建一列图片时，不会受到上一列图片inline:block的影响。而你在使用时需要时刻注意清除浮动，当内容不断变化时这很容易产生bug。

这里将block元素转为inline-block元素有两个容易解决的兼容性问题：
解决IE6、IE7兼容性的方法：
1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。
2、直接设置display:inline，使用zoom:1触发layout。
兼容两者的方法是：
display:inline-block;
*display:inline;
*zoom:1; 

3.对父元素设置font-size:0能消除元素间多余的空白，但不能消除苹果浏览器safari的盒子间隙，需再设置letter-spacing为负值，比如：letter-spacing:-4px;
此负值在font-size为0的情况下，对其他浏览器无影响；

两个结论： 1、IE6/7不识别inline-block，只是触发了layout，表现跟inline-block块元素表现一样。2、IE6/7不完全支持inline-block，只对内联元素有效。

转载于:https://www.cnblogs.com/gyx19930120/p/4419959.html