什么是BFC?

2019-09-25  本文已影响0人  疯狂的蜗牛Dianna

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(溢出滚动);

上一篇 下一篇

猜你喜欢

热点阅读