首页 > > 网页制作 > css >

浮动和BFC的学习整理转述

2018-06-24 01:00:20来源：未知阅读 ()

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

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

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

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

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

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

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

1. 利用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;
}

2. 父容器形成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上下重叠的；