块格式上下文 (BFC) 是 CSS 中网页布局的一部分，元素在其中定位并相互交互。简而言之，它就像一个容器，定义了一组元素在容器内应如何行为的规则。
在本文中，我们将看到“overflow:hidden 是否在 CSS 中创建新的块格式化上下文 (BFC)？”
答案是肯定的，因为在CSS中，overflow:hidden属性可以创建一个新的块级格式化上下文（BFC）。当一个HTML元素的overflow值不是visible（默认值）时，它会触发创建一个新的BFC。BFC可以防止边距折叠，有助于保持正确的定位，防止意外重叠，并帮助读者感知两个不同元素之间的对比。
现在，让我们看一下以下示例，以了解overflow: hidden对BFC创建的影响−
立即学习“前端免费学习笔记（深入）”；
Example
的中文翻译为：
示例
在下面的示例中，我们将“container”样式化，而不使用CSS的overflow:hidden属性。
.container { height: 70px; width: 300px; border: 2px solid; background-color: lightsalmon; } Tutorialspoint
Tutorialspoint.com is a dedicated website to provide quality online education in the domains of Computer Science, Information Technology, Programming Languages, and Other Engineering as well as Management subjects.
从输出结果中我们可以看到，容器内的文本超出了边界。因此，它可能会延伸到容器外部并与网页上的其他元素重叠，从而破坏布局。
Example
的中文翻译为：
示例
在下面的示例中，我们使用 CSS Overflow:hidden 属性来设计“容器”的样式 –
.container { height: 70px; width: 300px; border: 2px solid; overflow: hidden; background-color: lightsalmon; } Tutorialspoint
Tutorialspoint.com is a dedicated website to provide quality online education in the domains of Computer Science, Information Technology, Programming Languages, and Other Engineering as well as Management subjects.
通过向容器添加overflow:hidden属性，就创建了一个新的BFC。因此，如果文本超过容器的高度将被剪切并隐藏在视图中。但溢出的文本将保留在容器内。
以上就是在CSS中，overflow: hidden会创建一个新的块级格式化上下文吗？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625950.html
微信扫一扫 
支付宝扫一扫 
