CSS'overflow：hidden'的工作如何强制一个元素（包含浮动元素）环绕浮动元素？ [英] How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?

问题描述

任何人知道为什么overflow：hidden强制元素与浮动元素包装元素？

Anyone know why overflow:hidden forces an element with floated elements to wrap the elements?

我真的想了解内部的工作，而不仅仅是使用它，并相信它只是工作。

I really want to understand the inner workings rather than just using it and trusting that 'it just works'.

我可以理解它是如何工作的，当包含的元素浮动在与浮动的子元素相同的方向，但overflow：hidden意味着裁剪溢出的内容（当使用位置：绝对/相对）。

I can understand how it works when the containing element is floated in the same direction as child elements that are floated, but overflow:hidden means to crop overflowing content (when used with position:absolute/relative).

任何信息赞赏。

推荐答案

浮动
元素，inline-blocks，table-cells，
表字幕和元素
'overflow'除了'visible'
（除非这个值为
传播到视口）建立
新块格式化上下文。

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.

在块格式化上下文中，每个
盒的左外边缘
包含块的边缘（对于
从右到左的格式化，右边缘
touch）。这是真的，即使在
存在浮动（虽然一个盒子的
线框可能收缩，由于
浮动），除非框建立一个
新的块格式化上下文

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

块格式化上下文清除浮动。来源： http://www.w3.org/TR/CSS2/ visuren.html＃block-formatting

The block formatting context clears the floats. Source: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

这篇关于CSS'overflow：hidden'的工作如何强制一个元素（包含浮动元素）环绕浮动元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！