前言

大家好，我是林三心，革除浮动算是面试中CSS问的最多的一题了，当面试官问你请你说说如何革除浮动时，他必定不是想让你单纯地答出浮动的革除办法，而是想让你顺带答出BFC，就算他不想让你答出，你也要本人被动答出BFC，这样能力在泛滥面试者中怀才不遇嘛！嘿嘿！

浮动

1.场景

当咱们想实现以上面成果时，咱们第一工夫必定会想到浮动float

  • flex：不应该是第一工夫想起我吗？
  • 我：不，我不想
  • flex：呵，男人

不多BB，间接上代码

<div class="box">        <div class="left"></div>        <div class="right"></div></div>.box {            border: 1px solid black;            padding: 5px;            width: 450px;      }.left {            width: 100px;            height: 100px;            background-color: red;            float: left;       }.right {            width: 100px;            height: 100px;            background-color: red;            float: right;       }

然而却失去这样的成果：

WTF!!!怎么是这样呢？？？跟我想的不一样啊！！！这是为啥呢？？？

2.寻找起因

起因是，浮动的元素会脱离文档流，什么叫脱离文档流呢，举个例子，有一天你跟你老板说：“老子不想干了，世界那么大，我想去看看”，那从此以后，你老板就管不了你了。脱离文档流同理，一个元素一旦浮动，就会脱离文档流，那么他的父元素也管不了他了，布局也会往前推动，所以才呈现了下面父元素高度坍塌的景象。

革除浮动

想要解决下面的问题，那就要采取所有伎俩了，也就是面试官通常会问的，说一说你平时如何革除浮动的，这时候必定是答得越多种越好，嘿嘿！！

1.将父级也设置成浮动

.box {            border: 1px solid black;            padding: 5px;            width: 450px;            float: left      }

毛病：这种办法必定是弊大于利，想想都晓得，父级设置成浮动了，那爷爷级必定又会受影响，又得解决爷爷级的高度坍塌，这不是有限套娃吗？？

2.给父级减少定位absolute

.box {            border: 1px solid black;            padding: 5px;            width: 450px;            height: 100px      }

毛病：position:absolute也会脱离文档流啊，影响了整体布局，这不是给本人找罪受吗？

3.给父级设置overflow:hidden

.box {            border: 1px solid black;            padding: 5px;            width: 450px;            overflow:hidden      }

毛病：当文本过长，且蕴含过长英文时，会呈现英文文本被暗藏的状况

<div class="box">        <div class="left"></div>        <div class="right"></div>        <div>林三心林三心林三心林三心林三心林三心林三心林三心林三心林三心林三心林林三心林林三心林林三心林林三心林林三心林林三心林林三心林林三心林林三心林林三心林林sunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Linsunshine_Lin心林林三心</div></div>

4.给父级设置对应的高度

.box {            border: 1px solid black;            padding: 5px;            width: 450px;            height: 100px      }

毛病：如果浮动元素是定宽的，那还好，如果是不定宽的，那这种形式就很不灵便了，有可能明天是100px，今天是200px，先天是300px，那你不是得累死？

5.开端减少空元素进行clear

对于clear：


所以这里bottomDiv设置成clear:both，代表了它左右都不能有浮动元素，这迫使了他往下挪动，进而撑开了父级盒子的高度。

<div class="box">        <div class="left"></div>        <div class="right"></div>        <div class="bottomDiv"></div></div>.bottomDiv {            clear: both;        }

毛病：很显著，减少了一个div标签，减少了页面的渲染累赘（尽管我感觉应该影响不大吧）

6.给父级增加伪元素进行clear

这种办法就是用伪元素代替了下面的div标签，大家都晓得，伪元素是不会被渲染进去的，所以也很好的补救了上一种办法的毛病。

.box::after {            content: '.';            height: 0;            display: block;            clear: both;        }

毛病：哎呀，别求全责备啦！！！这个应该是目前最优解了吧。我是找不出毛病，欢送大佬们提供毛病。

聊聊BFC

1.官网解释

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程产生的区域，也是浮动元素与其余元素交互的区域。浏览器对BFC的限度规定是：

  • 1.生成BFC元素的子元素会一个接一个的搁置。
  • 2.垂直方向上他们的终点是一个蕴含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin个性。在BFC-- 中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。
  • 3.生成BFC元素的子元素中，每一个子元素左外边距与蕴含块的左边界相接触（对于从右到左的格式化，右外边距接触右边界），即便浮动元素也是如此（只管子元素的内容区域会因为浮动而压缩），除非这个子元素也创立了一个新的BFC（如它本身也是一个浮动元素）。
    这是MDN上的官网解释。(⊙o⊙)…，的确挺官网的。

2.触发条件

  • 根元素，即HTML标签
  • 浮动元素：float值为left、right
  • overflow值不为 visible，为 auto、scroll、hidden
  • display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、- - grid、inline-grid
  • 定位元素：position值为 absolute、fixed

3.集体了解

  • 1.外部的Box会在垂直方向上一个接一个的搁置
  • 2.外部的Box垂直方向上的间隔由margin决定。（残缺的说法是：属于同一个BFC的两个相邻Box的margin会产生折叠，不同BFC不会产生折叠。）
  • 3.每个元素的左外边距与蕴含块的左边界相接触（从左向右），即便浮动元素也是如此。（这阐明BFC中子元素不会超出他的蕴含块，而position为absolute的元素能够超出他的蕴含块边界）
  • 4.BFC的区域不会与float的元素区域重叠
  • 5.计算BFC的高度时，浮动子元素也参加计算
    第1点和第3点就不用说了，大家都懂，上面就来着重说说第2，4，5点吧！

4.解决margin重叠问题

如果我想要两个盒子之间间隔20px，我这么写：

<div class="box2"></div><div class="box3"></div>.box2 {            margin-bottom: 10px;            width: 100px;            height: 100px;            background-color: red;        }.box3 {            margin-top: 10px;            width: 100px;            height: 100px;            background-color: red;        }

后果发现，并没有达到预期，两个盒子的margin重叠了：

怎么解决呢？依据集体了解里的第2点可知：两个不同BFC环境的盒子，他们两的margin才不会重叠，那么咱们只需触发box3的BFC就行

.box3 {            margin-bottom: 10px;            width: 100px;            height: 100px;            background-color: red;            float: left;        }

这就实现了两个盒子中键距离20px了

5.浮动元素与BFC盒子不重叠

还是看例子：

<div class="box2 w"></div><div class="box3 w"></div>.w {        width: 100px;        height: 100px;    }.box2 {        float: left; // 触发BFC        background: red;    }.box3 {        background: green;    }

后果是，因为红色盒子浮动脱离文档流，导致绿色盒子向前推动，导致红色盒子盖住了绿色盒子

怎么解决呢？依据集体了解里的第4点可知：float盒子与BFC盒子不重叠，所以咱们只须要把绿色盒子设置为BFC盒子就行

.box3 {        background: green;        overflow:hidden // 触发BFC    }

成果：

6.利用BFC革除浮动

依据集体了解里的第5点可知：BFC盒子会把外部的float盒子算进高度中，这也是为什么后面能够通过给父级盒子设置float: left position: absolute overflow: hidden来解决浮动的高度塌陷问题，因为这些做法都使父级盒子变成一个BFC盒子，而BFC盒子会把外部的float盒子算进高度，趁势解决了高度塌陷问题

结语！

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】