【CSS基础—No.01】块级格式化上下文BFC

谈谈BFC吧,最近面试经常问,这点内容感觉自己答得总是不那么顺畅。

一、定义:

块级格式化上下文,可以理解为一个容器,这个容器内的物品不会被其他容器影响,也不会影响其他容器。

如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。

二、触发条件:

  • 根元素:body;

  • 元素设置浮动:float 除 none 以外的值;

  • 元素设置绝对定位:position (absolute、fixed);

  • display 值为:inline-block、table-cell、table-caption、flex等;

  • overflow 值为:hidden、auto、scroll;

三、应用场景:

下面的栗子都是使用 overflow:hidden 解决一些问题

1.解决margin的重叠问题:

上一篇:经典面试题:CSS定位知识及小盒子套大盒子的方法


下一篇:来千峰学习的第七天