浮动和BFC的学习整理转述

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

　　文档流的概念：html 中 block 块元素默认是单独占据一行的，从上到下排列，也就是我们说的文档流。

　　脱离文档流的概念：A 元素定义了 float 属性之后，就会"浮"起来，原来占据的空间由后面的 B 元素占据。

　　如果浮动起来的 A 元素和 B 元素发生重叠，浮动起来的 A 元素就会覆盖 B 元素。

　　浮动元素具有内联元素的特性，不在单独占据一行，相邻的浮动元素，最前面的具有 left 属性值的排在最左边，最前面的具有 right 属性值的排在最右边。

　　当多个浮动元素一排容不下时，就换行。

　　浮动会带来各种布局问题，主要是父容器塌陷（子元素在父元素外面，影响后面的布局），也就有各种解决方案，利用clear属性清除浮动或者使父容器形成 BFC。

利用 clear:both 清除浮动

　　在浮动元素后面在创建一个空的非浮动的 div(inline元素不可以)，并赋予属性 clear:both;

　　实际应用中我们更多采用 :after 伪元素加在父容器上来清除浮动，定义一个 clearfix 的 class，然后给它添加一个 :after 伪元素，它会在父容器的内容最后面在添加一个看不见的块元素，我们给它定义 clear:both;

/* 清除浮动 */

.clearfix:after {

      content: '';

      display: block;

      height: 0;

      clear: both;

      font-size: 0;

      visibility: hidden;

}

.clearfix {

    /*触发hasLayout,这又涉及到IE浏览器hack的知识*/

      zoom: 1;

}

BFC 学习

　　父容器形成 BFC 可以解决父容器内部子元素浮动引起的塌陷问题。

　　BFC 元素特性就是不论内部怎样，都不会影响外部布局。

　　如何触发BFC？

float 值为 left\right
overflow 值为 auto | scroll | hidden
display 值为 table-cell | table-captain | inline-block
position 值为 absolute 或 fixed

　　我们可以给父容器添加这些属性形成 BFC，达到“清”浮动（包含浮动）。

　　div 设置 float 属性之后会产生 inline-block 特性，不会占据一整行了。

　　position:absolute 会使父容器脱离文档流，虽然打成了目的，但父容器的位置问题又来了。

　　overflow：auto | scroll 有时候会出现滚动条。

　　overflow：hidden 需要确定不会出现溢出裁剪，很多企业不让用 overflow，我们需灵活掌握。

　　最后，Nicolas Gallagher 大师提供了一种更简便的方法，用的是 display:table。

    .clearfix:before, /*:before处理margin上下重叠*/

    .clearfix:after {

        content: "";

        display: table;

    }

    .clearfix:after {

        clear: both;

    }

    .clearfix {

        zoom: 1;

    }

　　这里的 :before 它是来处理 margin 上下重叠的；

margin 重叠

　　上下两个 div，上面的赋予 margin-bottom:20px，下面的赋予 margin-top:10px，那么两个div之间的间距是多少呢？

　　两个 div 之间的间距是 20px，因为发生了 margin 重叠，两个值那个大，间距就是哪个。

　　上面说的是上下两个 div，那么一个 div 在另一个 div 中呢？情况也是一样的，会发生重叠，只是变成了 top-top，bottom-bottom 重叠。

　　两个相邻的元素，嵌套的元素，只要它们之间没有阻挡，就会发生 margin 重叠。

　　margin重叠解决方法：

　　上下两个 div，这种情况一般不会用到，你看效果图的时候，一般都只会给其中一个 div 赋予 margin 的，都没有颜色，你也看不出来谁是谁，上面的列子我只是说存在这个情况。

　　内外嵌套的 div，很多时候会见到：

我们可以在它们之间加个阻碍，父元素或者子元素加个透明边框 border:1px solid transparent; 视情况可以具体到上边框还是下边框
父元素或者子元素加个 padding:1px；视情况可以具体到上 padding 还是下 padding
让父元素和子元素不在同一个 BFC，视情况给它们哪个触发 BFC