CSS之BFC理解
BFC的介绍
- BFC是一种规则，就像孙悟空三打白骨精里面孙悟空划了一个圈让师父和师弟在圈里，这样子白骨精就不能伤害师父和师弟。
- BFC的作用就是一种隔离和保护。
BFC解决问题场景
- 比如说很多页面都有广告的部分，也提供用户点击关闭的按钮，这样子的广告一般都是用BFC创建的，因为用户点击关闭以后不能影响整个页面的布局，这样子的广告经常会设置
position:absolute，这样子我们就可以给广告进行任意的定位了。不过这样子滚动到下面就看不到内容了。想要设置滚动以后依然可以看到内容则可以设置position:fixed，这样子滚动以后还是可以看见内容。 - 有一些设置浮动的地方，设置浮动时的元素是脱离了正常的文档流的，实际上浮动元素本身也是BFC，浮动起来以后自己也是在一个隔离区，对于浮动元素类似
float:left这种，可以给父元素设置overflow:auto（对于overflow只要不是visible都是可以的，比如：auto、hidden(如果整个区域有设置高度，则要小心使用，因为它会隐藏部分内容)、scroll）触发BFC来清除浮动。 - 另外创建BFC来清除浮动的方法，都是把内容强行包裹起来，不至于不能设置背景，比如将一些图片设置浮动时，可能背景就会消失，这时，可以对父元素设置：
display:inline-block或者display:flex。 - 有时候我们给一些图片加上顶部外边距时，没有效果，反而是包裹它的整个外边距都往外移动了，这就是外边距塌陷问题（发生了外边距的重合），这个时候就需要把整个图片隔离起来。可以给图片区域使用
display:inline-block，这样子就给图片区域形成了BFC。
创建BFC的几种常见方式
-
position:absolute或position:fixed -
float:left或float:right，只要不是float:none就可以 -
overflow:auto或overflow:hidden或overflow:scroll，只要不是visible均可 -
display:inline-block或display:flex - 根元素：
<html>
