Question

我有一个项目列表，每个项目都有一个右对齐部分和一个左对齐部分。左对齐部分应自由扩展，但保持在右对齐部分下方，而不将其推到下一行

发生了什么：

|this is an expanding area of text|
                            |-other stuff-|

会发生什么：

|this is an expanding area o|-other stuff-|
                           ^
            the last part of the text is cut off here

现在我正在使用float: right和float: left但是如何阻止它们进行包装？其他东西总是相同的东西，但在不同的浏览器上呈现不同的宽度，所以我不能指定精确的宽度并使用overflow: hidden

Answer 1

您可以使用overflow和float的组合来实现此目的。这是因为overflow: hidden建立了新的block formatting context这一事实。换句话说：

正常流程中元素的边框，用于建立新的块格式化上下文（例如，除了＆＃39;溢出＆＃39;除了＆＃39; visible＆＃39;之外的元素）不得与边距重叠与元素本身相同的块格式化上下文中的任何浮动框（在这种情况下，由于浮动，框本身可能会变窄）。