从几种清除浮动的方法聊到BFC

【清除浮动】

在清除浮动之前，我们总得知道为什么要清除浮动吧？看下面这段代码：

  <div class="topDiv">
        <div class="floatDiv">
            float left
        </div>
        <div class="textDiv">
            不知曾几何时，随着智能机的成熟发展，防水性能无形之中成为了手机的众多卖点之一。对不少亲身经历的用户而言.
        </div>
    </div>
         <div class="bottomDiv">
    27日
        </div>

按正常情况下，topDiv这个盒子里放置的floatDiv和textDiv盒子本应该正常排列，但是在我们对floatDiv这个盒子加了float：left属性后，情况就发生了变化

这里我们可以看到，在floatDiv盒子添加了float属性后，整体的布局发生了改变，我们可以得知它造成的影响

1. 影响了页面整体的布局
2. 影响了父容器topDiv的高度，正常父元素的高度是自适应的，高度为其包含的内容总高度，而内部元素的浮动造成了父容器高度塌陷。（可以看到这里我们的topDiv盒子的高度明显发生了塌陷）
3. 父容器的塌陷，影响了与父元素同级的其它元素的布局（例如上图中红色盒子同时穿插了topDiv盒子和与它同级的bottomDiv盒子，对其造成了影响

作为一名合格的前端开发人员，我们总不可能为了实现让文字环绕图片排版的功能，给甲方提交一个这样的页面吧？所以此时我们就会用到以下几种清除浮动的方法，来清除浮动对整体的影响。

【方法】

①在同级向下相邻元素上使用clear属性

很多人可能问这是啥意思啊？在这我们拿上面的例子来说明，这里说的同级相邻元素指的是在添加了浮动属性的元素的同级元素，也就是textDiv盒子上添加clear属性,下面是效果图

前提是textDiv这个盒子在floatDiv的下方，在上方则不起作用

②父元素结束标签之前插入清除浮动的“块级元素” 行内元素不行。 这里的父类元素标签指的是添加了float属性的那个元素所处的父容器，在本例子中就是在topDiv的前，放置一个块级元素，并对这块级容器的css中写入clear属性

 html中
    <div class="clearfix">

    </div>
 css中   
  .clearfix
    {
        clear:both;
    }

③给父元素增加一个伪元素 在伪元素上做clear：both

本例中的父类元素是topDiv，也就是说对其添加一个伪元素，并在其内写入clear属性

.topDiv::after{
            content:'.';
            display: block;
            height: 0;
            overflow: hidden;
            clear: both;
        }

④ 把父容器设置成BFC容器，BFC容器效果能够把脱离文档流的元素的高度也计算到父容器里面去，以达到清除浮动的效果

.topDiv
        {

             overflow: hidden; 

        }
        

看到这里可能有人会问，什么是BFC容器呢？说实话我每次看到这个都联想到KFC。。。

什么是BFC？

BFC的全称是“BFC(Block Formatting Context) 块级格式化上下文”，它是w3里的一个概念，它决定了元素如何对其内容进行定位。将盒子设为BFC容器时，恰好可以抵消浮动带来的影响，但这并不意味着BFC容器就是单独用来抵消浮动影响的，只是它恰好有这种作用而已。BFC就是页面上的一个隔离的独立的容器，在计算BFC容器高度时，会把其中的浮动元素的高度也计算其内，

BFC的布局规则
  1. 内部的Box会在垂直方向，一个接一个地放置。

  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

  3. 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

  4. BFC的区域不会与float box重叠。

  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

  6. 计算BFC的高度时，浮动元素也参与计算。

 

看以下代码

 主体
 <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
 css部分
  .left
    {
        background:green;
        border:3px solid #f31264;
        width: 200px;
        height: 200px;
        opacity: 0.5;
        float:left;
    }
    .right
    {
        background: #ef5be2;
        opacity: 0.5;
        border: 3px solid #f31264;
        width: 400px;
        min-height: 100px;
}

以上为初始状态下，仅对left盒子进行了设置float属性，此时画面是这样的

此时我们可以清楚的看到left盒子，也就是绿色那一部分，脱离了文档流，造成了父容器的高度坍塌，也就是灰色的那个盒子高度坍塌。此时我们把父容器变为BFC容器

 <div class="box BFC">
 

此时页面效果如下

此时可看到，对父容器box设置为BFC容器后，浮动对其造成的高度塌陷影响已经消失了，它的高度包含了浮动元素的高度，也就是撑起来了。由此可以知道，BFC容器可以解决浮动带来的影响。那么除此之外？它还有其它作用么？那显然是有的，毕竟BFC的存在不是为了解决浮动问题的，只不过恰好可以有这么个效果而已。BFC容器还有另一个常用的作用，它可以解决margin的重叠问题。

BFC解决margin重叠问题

我们创建一个新的html，放入代码

 .wrap
        {
            background: orange;
            width: 100%;
            height: 500px;
            
        }
        .container
        {
            height: 200px;
            background: green;
            
        }
        .box
        {
            height: 100px;
            background: pink;
          
        }

此时页面效果是下面这样的

我们依次给这三个容器设置margin-top，值分别是100px，100px，50px，大家此时是不是觉得此时的效果是这样的

但其实并不是的，它此时的效果是这样的

它的整体向下移动了100px距离，这是css的一个bug，在相邻的盒子使用margin时，会取值最大的那个值实现。而将盒子设置为BFC容器可以解决这个问题

     <div class="wrap BFC">
            <div class="container BFC">
                <div class="box BFC">
                

此时的页面效果便是第二张图了，也就是说设置为BFC容器后解决了margin重叠问题。

在这里我们要注意，BFC包含创建上下文元素的所有子元素，但是不包含新创建BFC的子元素的内部元素，也就是山高皇帝远。举个例子，A为一个大容器，里面装着B容器，B容器里装着C容器，此时我们将A容器设置为BFC容器，那么B和C就受A控制。但此时将A、B同时设置为BFC容器，那么C只能被B控制，A控制不了B。

如何设置BFC容器，需要什么条件？

  .BFC
        {
            overflow: hidden;
        }

我们在这里面除了塞hidden还能放什么可以达到同样效果呢？这里总结了一下

1. 用 overflow：hidden 和  overflow：auto   overflow：scroll   overflow：overlay 都可以创建
2. 绝对定位 （absolute、fixed） 
3. 行内块级（inline-block）
4. 表格单元 （display：table-cell）
5. 弹性盒子 （flex、inline-flex）

除了以上之外，还有一种很有意思的方法。比如A中放了B盒子，A没设置高度，此时B设置float属性，那么A会高度坍塌。此时我们可以把A也设置为float，与B一起脱离文档流，那么此时A又会被B撑开，也能清除浮动带来的影响。