什么是BFC？看这一篇就够了_bfc是什么

*{
    margin: 0;
    padding: 0;
}
p {
    color: #f55;
    background: yellow;
    width: 200px;
    line-height: 100px;
    text-align:center;
    margin: 30px;
}
div{
    overflow: hidden;
}

看看我的 margin是多少

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190323160150540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NDIyMjM2,size_16,color_FFFFFF,t_70)


###### 2.自适应两栏布局


根据：


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

页面：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2019032316073845.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NDIyMjM2,size_16,color_FFFFFF,t_70)


又因为：


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


所以我们让right单独成为一个BFC

页面：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190323161159873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NDIyMjM2,size_16,color_FFFFFF,t_70)


right会自动的适应宽度，这时候就形成了一个两栏自适应的布局。


###### 3.清楚浮动。


当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动。


比如这样：

页面：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190323161720931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NDIyMjM2,size_16,color_FFFFFF,t_70)


这个时候我们根据最后一条：


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


给父节点激活BFC

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。