css 清除浮动 & 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