当前位置: 首页 > 面试题库 >

CSS'overflow:hidden'如何工作以迫使元素(包含浮动元素)环绕浮动元素?

东门晓博
2023-03-14
问题内容

任何人都知道为什么overflow:hidden强制具有浮动元素的元素包装元素吗?

我真的很想了解内部工作原理,而不是仅仅使用它并相信“它确实有效”。

当包含元素的方向与浮动的子元素相同的方向时,我可以理解它的工作原理,但是overflow:hidden意味着裁剪溢出的内容(与position:absolute
/ relative一起使用时)。

任何信息表示赞赏。


问题答案:

浮点数,绝对定位的元素,内联块,表单元格,表标题以及具有“可见”以外的“溢出”的元素(当该值已传播到视口时除外)建立新的块格式上下文。

在块格式设置上下文中,每个框的左外边缘与包含块的左边缘相接触(对于从右到左的格式,右边缘相接触)。即使存在浮点数,也是如此(尽管框的行框可能由于浮点数而缩小),除非框建立了新的块格式化上下文(在这种情况下,框本身可能会由于浮点数而变窄)。



 类似资料:
  • 问题内容: 我只在div中遇到浮动元素问题,这是问题所在: 我需要有关第二个DIV的边框及其内容位置的说明。为什么边框在后面但内容在第一格之下? 还根据:https : //css-tricks.com/all-about-floats/#article-header-id-3 关于浮点数的更令人困惑的事情之一是它们如何影响包含它们的元素(它们的“父”元素)。如果此父元素只包含浮点元素,则其高度实

  • 问题内容: 我想问一下高度和漂浮物是如何工作的。我有一个外部div和一个内部div,其中包含内容。它的高度可能取决于内部div 的内容,但似乎我的内部div会溢出其外部div。正确的做法是什么? 问题答案: float大多数初学者都误解了该属性。好吧,到底是做float什么的?最初,float引入了该属性,以使文字围绕图像浮动left或浮动right。这是 @Madara Uchicha 的另一种

  • 问题内容: 我有一个清单,李的有一个。之后的内容应正确对齐。 我认为,可以通过使用:after这样的伪选择器来删除。 我是否总是需要创建一个单独的div来清除浮动元素? 问题答案: 这样写:

  • 问题内容: 如果我有三个向右浮动的元素,那么为什么顺序跟随(请参阅jsfiddle),而元素3实际上是最后一个元素,则元素1是右侧的第一个元素。 现在订购 但是元素在html中按此顺序 为什么? 问题答案: 这种“倒序”是预期的结果。 您可以根据需要在CSS规范中进行深入研究,但是示例将按原样进行渲染。 如果您希望它们以与标记相同的顺序显示,请向右浮动,其子项向左浮动。

  • 问题内容: 我正在尝试在网络上进行搜索,但不确定要查找的内容是什么。我试图找出如何创建将被修复的div元素,或者仅在该元素的TOP达到窗口浏览器视图的TOP时才浮动。例如,如果某个元素位于页面的中间,那么当您继续向下滚动时,该元素将一直保留直到它即将消失,然后它才希望保留在我的浏览器顶部(固定)。 问题答案: 我想我正在做与您想做的事情类似的事情。试用以下代码,将所需的内容放入通知div中,并单独

  • 问题内容: 假设我们有一个非常简单的场景 这是样式: 事情是…当我向其中添加内容时,应该拉下父div,我们需要看到红色背景…问题是,我看不到红色背景充满了所有高度。 问题答案: 当子元素浮动时,它们将从文档流中删除。这样做时,父级将不再具有定义的尺寸,因为子级在技术上不会占用空间。因此,父元素自身折叠。当绝对定位子元素时,也会发生相同的情况。 在这种情况下,我们可以通过添加到父元素来修复它,从而强