BFC如何消除div和body之间的空隙？ _编程开发

BFC如何消除div和body之间的空隙？

创始人

2024-12-01 02:01:50

0次

BFC全称为块级格式化上下文，可以解决一些常见的布局问题，包括div和body之间的空隙。

为了创建BFC，可以使用下面的CSS属性之一来触发：

float属性除了none外的值
position属性为absolute或fixed
display属性为inline-block、table-cell、flex、inline-flex
overflow属性除了visible外的值

其中最常用的是overflow属性，设置为任何值除了visible都可以触发BFC。

代码示例：

html { height: 100%; } body { margin: 0; padding: 0; height: 100%; overflow: auto; } .wrapper { background-color: #ccc; overflow: auto; } .inner { width: 300px; height: 300px; background-color: red; margin: 10px; }

在以上示例中，我们触发了.wrapper的BFC，通过给它设置overflow属性，并将body和html的高度设置为100%，去除了div和body之间的空隙。

注意：使用BFC可能会影响其他布局，因此应该谨慎使用。

上一篇：BFC的特征有哪些？为什么说BFC内部的box会在垂直方向一个接一个放置？请解释其实现原理。

下一篇：BFC是如何被引入CSS中的？在什么情况下使用BFC能够解决布局问题？

BFC如何消除div和body之间的空隙？

相关内容

热门资讯