Question

我觉得应该有一个简单的答案。我有一个侧边栏向右浮动，当我注意到悬停时有一些问题。原来我的

<p>

左边的

标签交叉进入浮动，即使它们内部的文本正确地避开浮动。我做了一个简单的jsfiddle示例，以显示我的意思，并打开背景，以便您可以看到它们重叠。

JSFiddle：http://jsfiddle.net/ahvs3nr3/

Answer 1

我认为<p>标签是一个块元素。这会对你的情况有效吗？

p {
    display: table;
}

http://jsfiddle.net/ahvs3nr3/3/

Answer 2

添加此CSS可修复问题：

p {
  overflow: auto;
}

<强> Working Fiddle

在您的代码中，容器（p）溢出了侧边栏，即使其内容被限制为不溢出。

来自W3 spec：

浮动，绝对定位元素，阻止容器 ......不是阻止盒子和带有“溢出”的块盒。除了＆＃39;可见＆＃39; ......建立新的阻止格式化其内容的上下文。

这就是我尝试overflow: auto的原因。

在块格式化上下文中，每个框的左外边缘都接触到包含块的左边缘（从右到左格式化，右边边缘触摸）。即使在浮子的存在下也是如此（尽管如此）除非盒子，否则盒子的线盒可能会因浮子而缩小建立一个新的块格式化上下文（在这种情况下，框由于漂浮物本身可能会变窄。

这就解释了为什么容器溢出侧边栏，但它的＆＃34;线盒＆＃34; （包含其文本）不会。

那么＆＃34;行框＆＃34;究竟是什么？

在内联格式化上下文中，框是水平布局的，一个在另一个之后，从包含块的顶部开始。这些之间会考虑水平边距，边框和填充框。盒子可以以不同的方式垂直对齐：它们底部或顶部可以对齐，或者其中的文本基线可以对齐。包含形成框的矩形区域一条线称为线框。线框的宽度由a确定含有块和浮子的存在。

没有明确的内联元素，因此导致这种＆＃34;内联格式化上下文＆＃34;？

直接包含在块容器元素中的任何文本（不在内联元素内）必须被视为匿名内联元件。

你有它。每个段落中的文本是一个＆＃34;匿名内联元素，＆＃34;这会创建一个＆＃34;线框，＆＃34;受到花车的影响。

Answer 3

只需在p标签右边添加一些边距。

.sidebar {
    background-color:rgba(0,0,0,.2);
    float:right;
    width:25%;
    height:30em;
}

p { background:red; padding:1em; margin-right: 25%; }

我还添加了一个jsfiddle以供参考。

http://jsfiddle.net/ahvs3nr3/2/

我在这里使用％margin，因为它们将适应任何宽度的浏览器，但是如果你想使用5em侧边栏，只需确保p标签具有相同的边距量。

如何使容器避免像其内部文本一样浮动

3 个答案: