CSS浮动与BFC

这样有需要就加上这个空盒子，但是这样就加了一大堆混淆内容的空盒子不利于内容与样式的分离，然后学习了css中：after这一属性后就采取全部用css来清除浮动了，html代码变为:

CSS代码:

.clear:after{

clear:both;

content:‘’;

display: block;

height: 0;

visibility: hidden;

}

这样后续只需在父元素中引入clear类就可以了，更加方便。

BFC

最近做项目时遇到布局问题，虽然自己实现了相关的界面，但导师指出这显然不是最优方案，并且介绍了BFC（Block Format Content），之前从未听过这个词，看后顿时觉得自己之前的探索是多么的肤浅。

w3c规范中的BFC定义：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

这也就是BFC提供了一个封闭的空间，并且BFC不会与浮动元素发生重叠。形成BFC的条件就有以下几点：

1. float为 left|right

2. overflow为 hidden|auto|scroll

3. display为 table-cell|table-caption|inline-block

4. position为 absolute|fixed

因此就可以利用它提供的封闭盒子来清除浮动，如给container类加css:

.container{overflow:hidden;}

这样不用加其它任何处理就可以清除浮动了，实在方便。其次也可以利用BFC来形成两栏布局，像一边宽度固定另一边宽度自适应就是个典型例子。

当然可以用左边各自的浮动和右边盒子的margin-left来实现

.container{overflow:hidden;}//清除浮动

.left{width:100px;height:100px;float:left;background:#ff0000;}

.right{margin-left:100px;height:250px;background:#00ff00;}

这种虽然实现了效果，但是两个盒子有着数字依赖，即改变左边盒子的宽度，右边盒子的margin-left属性就必须改变，而根据BFC的不会与浮动元素重叠，上述代码就可以改变为:

.container{overflow:hidden;}//清除浮动

.left{width:100px;height:100px;float:left;background:#ff0000;}

.right{overflow:hidden;height:250px;background:#00ff00;}

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。