在一个BFC中,块级元素会在垂直方向上一个接一个排列,不会出现重叠,并且每个元素的左边和右边都会贴着父容器。这种排列方式通常被称为普通流。其中,形成BFC的元素有以下几种:
1. body元素 2. 浮动元素 float 不为 none 3. position 为absolute或fixed 4. display:inline-block; inline-flex 5. overflow不为visible的块元素 6. fieldset元素 7. table元素 8. 弹性元素 flex
通过创建BFC,大家可以让以下操作变得简单:
1. 清除浮动:给浮动元素所在的父元素设为 BFC 2. 避免 margin 重叠:在需要避免margin重叠的元素外层设置为BFC 3. 自适应两栏布局:利用BFC解决高度塌陷问题 4. 防止元素溢出:使用触发BFC
总之,BFC是一个很强大的工具,它可以帮助大家解决许多css布局问题,提高代码的可维护性和易读性。同时,大家也需要注意在具体应用BFC的时候,要灵活选择元素的定位方式和触发方式,以达到最佳的效果。