您好,欢迎访问一九零五行业门户网

在CSS中,overflow: hidden会创建一个新的块级格式化上下文吗?

块格式上下文 (bfc) 是 css 中网页布局的一部分,元素在其中定位并相互交互。简而言之,它就像一个容器,定义了一组元素在容器内应如何行为的规则。
在本文中,我们将看到“overflow:hidden 是否在 css 中创建新的块格式化上下文 (bfc)?”
答案是肯定的,因为在css中,overflow:hidden属性可以创建一个新的块级格式化上下文(bfc)。当一个html元素的overflow值不是visible(默认值)时,它会触发创建一个新的bfc。bfc可以防止边距折叠,有助于保持正确的定位,防止意外重叠,并帮助读者感知两个不同元素之间的对比。
现在,让我们看一下以下示例,以了解overflow: hidden对bfc创建的影响−
example的中文翻译为:示例在下面的示例中,我们将“container”样式化,而不使用css的overflow:hidden属性。
<!doctype html><html><head> <style> .container { height: 70px; width: 300px; border: 2px solid; background-color: lightsalmon; } </style></head><body> <h1 style=color: seagreen;>tutorialspoint</h1> <div class=container> <p> 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. </p> </div> </body></html>
从输出结果中我们可以看到,容器内的文本超出了边界。因此,它可能会延伸到容器外部并与网页上的其他元素重叠,从而破坏布局。
example的中文翻译为:示例在下面的示例中,我们使用 css overflow:hidden 属性来设计“容器”的样式 -
<!doctype html><html><head> <style> .container { height: 70px; width: 300px; border: 2px solid; overflow: hidden; background-color: lightsalmon; } </style></head><body> <h1 style=color: seagreen;>tutorialspoint</h1> <div class=container> <p> 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. </p> </div> </body></html>
通过向容器添加overflow:hidden属性,就创建了一个新的bfc。因此,如果文本超过容器的高度将被剪切并隐藏在视图中。但溢出的文本将保留在容器内。
以上就是在css中,overflow: hidden会创建一个新的块级格式化上下文吗?的详细内容。
其它类似信息

推荐信息