BFC就是一个css的一个布局概念,是一个独立的区域,是一个环境。
触发BFC的条件
满足下列条件之一就可以触发BFC
1:根元素,即html元素
2:float的值不为none
3:overflow的值不为visible
4:display的值为inline-block、inline-flex、flex、flow-root、table-caption、table-cell。
5:position的值为absolute或者fixed
BFC的作用
开启BFC的元素不会被浮动元素覆盖
开启BFC的元素子元素和父元素外边距不会重叠
开启BFC的元素可以包含浮动的元素(高度不会塌陷)
补充:
overflow规定当内容溢出元素框时发生的事情。
overflow:visible 默认值,内容不会被修剪,会呈现在元素框之外。
overflow:hidden 内容会被修剪,并且其余内容是不可见的。
overflow:scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
overflow:auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit 规定应该从父元素继承overflow的属性。
display:none 这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。
visibility:hidden 则表示隐藏,位置还在。