今天将css回顾了一遍，对比之前没有复习css的我来说，真的是更加深刻。发现其实东西也不是很多。拎清除了它的一些要点。
- CSS中最容易想到的就是浮动，那么以下问题你都会回答吗？
- 怎么浮动？
- 浮动的特点有哪些？
- 浮动带来的问题？
- 怎么清除浮动？
相信大家第一个问题都能回答出来，就是float嘛。没错！那接下来的呢？ 这些都是面试笔试常用的套路，其实一开始我也不了解、不知道，只是后来接触多了自然就多少有些了解。
- 对于第二个问题：它的特点有五个，脱离标准文档流、相互水平贴靠、自围效果、不设宽度具有收缩、父元素的宽度等于子元素宽的和的特点。
- 第三个问题：浮动主要的问题是浮动元素使容器失去高度，影响后续元素。
- 第四个清除浮动的方法很多：可以分为有缺陷的和可行的两种。有缺陷的有：加高法、内墙法、外墙法。可行的有：清除法（clear:both）、overflow:hidden/auto、还有一种就是在元素前啊加上after伪类(用于非IE浏览器)。
- BFC可以算是CSS中比较重要的一块内容了。以下我罗列了几点面试可能会问的问题。
- BFC是什么？
- BFC的原理是什么？
- 怎么创建BFC？
- BFC是用来干什么的？ 学的比较浅的同学，可能连BFC的第一个问题都回来不上来，我就不多闲话，直接看答案吧。
- (1) BFC是块格式化上下文
- (2) BFC的原理就是BFC的渲染规则。主要有四种：内部块盒子会在垂直方向一个一个的放置、BFC区域不会和float重叠，可以用来清除浮动和布局、BFC是一个独立的元素，内部元素不会影响外部元素，外部元素也不会影响内部元素、在计算BFC高度的时候，浮动元素也参与计算。
- (3) BFC创建方法：overflow除了visible,float除了none,position除了relative,display。
- (4) BFC的应用有：包含浮动元素子元素、解决垂直方向margin的层叠和塌陷问题,设置浮动元素的水平外边距,清除字围效果。
- 浮动元素塌陷是面试官提问关于CSS最常见的一个问题了。那么你对塌陷又了解多少呢?
- 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。 但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
- 那么怎么解决呢？ 第一种：在子元素的最后添加一个高度为0的子元素。 第二种：针对于父元素，display:inline-block; 或者overflow:hidden; 这两种方法其实就是使用的BFC的规则。BFC父元素包含浮动的子元素，从而解决父元素高度坍塌问题。 第三种：给父元素定高，但不能随着子元素的方法或缩小和变化。 第四种：万能的解决方法就是加after伪元素。
作者：ClyingDeng
链接：https://juejin.cn/post/6844903928044208142
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
