CSS教程

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

本文主要是介绍【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基础—No.01】块级格式化上下文BFC的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航