第五次课程小结：清除浮动

什么是浮动

浮动的本质：实现文字环绕效果
元素脱离文档流不脱离文字流
脱离文档流：假如A元素浮动了，原本排在该元素之后的元素发现A元素不在这个文档流了，就会无视它往上接到A元素前面的元素之后
不脱离文字流：文字并不会无视它，还会环绕A元素

使用position：absolute，脱离文字流，直接覆盖

浮动会导致父元素的高度塌陷

BFC

块级格式化上下文，当创建BFC之后元素就会把里面的东西视为自己的东西，包括浮动元素，然后创建一个私有领域给包裹进来。
创建BFC 的几种方法：

• float不为none
• overflow不为visible
• display为table-cell、table-captain、inline-block

• position不为static、relative
  BFC的特性：
  1.让原本会叠加的上下外边距叠加无效。相邻盒子margin垂直方向会重

  
  
  

  2.BFC不围绕浮动元素

  
  

清除浮动的方法(解决父元素高度塌陷)

• clear:both
• 创建BFC

1. 通过在浮动元素末尾添加一个空的标签例如并设置样式为clear:both | left | right ，其他标签br等亦可

<div class="parent">
    <div class="child"></div>
    <div style="clear: both;"></div>
</div>

优点：简单
缺点：增添新标签，不符合语义化

<div class="parent">
    <div class="child"></div>
    <br clear='all'>
</div>

2. 伪元素:after
   由于IE6-7不支持:after，使用zoom:1触发hasLayout。其实是通过 content 在元素的后面生成了内容为空的块级元素

.clearfix:after {
    content:"";
    display:block;//通过 content 在元素的后面生成了内容为空的块级元素
    height:0;
    visibility:hidden;
    clear:both; 
}
.clearfix {
    zoom:1;
}

优点：结构和语义化完全正确,代码量居中。
缺点：复用方式不当会造成代码量增加。

.clearfix:after {
    content:"";
    display:table;
    clear:both; 
}
.clearfix {
    zoom:1;
}

用display:table 是为了避免外边距margin重叠导致的margin塌陷, 内部元素默认会成为 table-cell 单元格的形式
.clearfix应该用于包含浮动子元素的父元素上

float浮动

使用浮动将造成：
元素block块状化
破坏性造成的去空格化