美文网首页
什么是BFC?

什么是BFC?

作者: 疯狂的蜗牛Dianna | 来源:发表于2019-09-25 22:08 被阅读0次

bfc(Block Formatting Context)块级格式化上下文

1. 触发了bfc的盒子,就成为了一个独立渲染的区域,里面的子盒子不会影响到外面盒子的布局

应用: 解决塌陷问题,解决塌陷问题

2.触发了bfc的盒子,不与浮动元素想重叠

应用: 左侧固定,右边自适应,圣杯布局(双飞翼布局)

触发bfc的方式

1. float: right; float: left; (浮动本身就触发了bfc)

2.position: absolute/fixed;

3.display: table/table-cell;(每个其实都是一个独立的区域,执行效率比较慢)

4.overflow: 非visible; => hidden / auto(自动)/ scorll(溢出滚动);

相关文章

网友评论

      本文标题:什么是BFC?

      本文链接:https://www.haomeiwen.com/subject/ajhyuctx.html