CSS之浮动

浮动带来的影响

浮动使元素脱离了文档流，后面的元素当该浮动元素不存在，会顶替它的位置。如果浮动元素后面的元素中包含文本，则文本会为浮动元素让出空间来，形成环绕浮动元素的效果。此外，由于浮动元素脱离的文档流，则对父元素来说不具备高和宽，父元素不再会伸缩高度来将浮动的子元素包括进来，会造成父元素塌陷。
浮动元素会向左或向右浮动直到它碰到父元素的边框或者其他浮动元素。

清除浮动带来的影响

可以对浮动元素后面的元素使用clear，清楚对后面元素的影响，但是这样并不会使塌陷的父元素重新被撑起来。
使用闭合浮动防止父元素塌陷：
1. 给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现容器元素末尾添加一个看不见的块元素（Block element）清理浮动。

<div class="cont clearfix">
<img src="norton.jpg" />
</div>
//CSS
img{
    float:left;
}
.clearfix:after{
    content:".";
    visibility:hidden;
    display:block;
    height:0;
    clear:both;
}
.clearfix{zoom:1;}

使用 content 属性来指定要插入的内容。
:after 选择器在被选元素的内容后面插入内容。
需要注意的是为了IE6和IE7浏览器，他们不支持:after，要给clearfix这个class添加一条zoom:1;触发haslayout（你可以把它写到IE6、7的CSS hacker文件里，这样不会影响W3C标准验证）。

2. 父元素使用overflow:hidden。使得原本“溢出”父元素的孩子元素又跑回父元素内，把父元素撑起来了。但这个方法的缺点是如果父元素中包含其他更多的元素，可能会造成其它元素溢出父元素的部分不可见。
该方法在IE6中仍然需要触发haslayout
当然还有很多其他的清除浮动的方法，这里总结起来基本分为两类：一个是像“1”中那样在父元素中再添加一个内容来清除浮动，还有一个是像“2”中那样触发BFC。
注意：只有块级元素才可以使用clear样式清楚浮动。

BFC和hasLayout

1.BFC
BFC就是block formatting context，一个BFC就相当于是一个独立的盒子，它提供了一个包含区域，包含里面的块框与行内框，决定了它们怎么排布，BFC内部不会受BFC外部影响也不会影响到外部。

进行了下列操作会触发BFC，即为其内容生成新的块级格式上下文：

• float:left|right
• position:absolute|fixed
• display:inline-block|table-cell|table-caption
• overflow:hidden|auto|scroll

另外，BFC具有以下特性：

• 在一个BFC中，盒子一个接一个排列，垂直方向上相邻的两个盒子的外边距会发生折叠。
• 元素的左外边距会触碰到包含块容器的左外边框，就算存在浮动也会如此。
• BFC区域不会与浮动元素叠加，即如果前面有个元素浮动了，通常后面的元素会顶替浮动元素的位置，浮动元素会浮在后面元素上面，而如果后面的元素形成了BFC，那么浮动元素和BFC叠加的部分将会消失。？？？理解得不对好像！！！
• 在计算高度的时候，BFC元素内部的浮动元素也要算上。
  
  另外在博文那些年我们一起清除过的浮动中还总结了一下特性：
  1 ) 块级格式化上下文会阻止外边距叠加
  当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
  2 ) 块级格式化上下文不会重叠浮动元素
  根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。
  3 ) 块级格式化上下文通常可以包含浮动

2.hasLayout
hasLayout是IE下的一个专有概念（属性），它决定一个元素是否拥有一个布局。它并不是一个CSS属性，所以不能显示的对它设置true或false。一个拥有布局的元素负责它自己及其子元素的尺寸和定位，没有布局的元素由其拥有布局的祖先元素负责。当一个元素拥有布局时，就称它has layout（hasLayout为true）。hasLayout在IE8标准模式中被移除。
通常设置zoom可以触发该属性。

关于CSS中外边距折叠的解释：

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
折叠发生的条件：

• 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
• 折叠发生在垂直外边距上，即margin-top/margin-bottom
• margin 折叠元素只发生在块元素上
  

那么上面的条件意味着如果是下列情况则不会发生折叠：

• 定义了属性overflow且值不为visible（即创建了新的块级格式化上下文）的块元素，不与它的子元素发生margin 折叠
• 浮动元素、绝对定位的元素不与其他任何元素的 margin 折叠
• inline-block元素不与任何元素的外边距产生折叠

参考资料：深入理解BFC和Margin Collapse
margin系列之外边距折叠
BFC和hasLayout
闲聊CSS之关于clearfix清除浮动