关于CSS display:inline 遇上 overflow:hidden 的问题。

假设一个div 里面分为左右两边。
左边的设置float:left。 并且设置为display: inline
右边不设置float的。 但是加overflow: hidden。 原本 占据左边的部分就会被隐藏。
然而P3和P4并没有被隐藏并且挪动了位置。
是不是因为p3 p4本身的内容并没有把容器撑爆。所以overflow自动调整（修剪）了内容的位置

• .right 没有设置 width 和 height ，完全由其内部的 p 元素来撑开。
• 那么 .right 的边界就在 p 元素这里。

“如果overflow被设置为hidden，元素的内容会在元素的边界处剪裁，不过不会提供滚动接口使用户访问到超出剪裁区域的内容。”摘自《CSS权威指南》

• 可以在 p 元素设置 overflow: hidden; 看看 p 的边界在哪里，这里也是 .right 的边界。根据上面的引用， .right 设置 overflow: hidden; 也会在这里裁剪。
• overflow: hidden; 之后再增加 p 或者其他的，自然不会超出 .right 范围。

你的div没有height，所以被自动延伸了哦。你把div设置一个足够小的height，看看效果。

我回答简单一点， 首先 P3 ，P4 没有隐藏，确如楼上所说，.right使被撑起来的， 另外，你设置了清除浮动，如下图

现在的文档流展示方式完全正确， 不知道你还有什么问题