css - p 标签上的溢出自 Action 为站点范围的默认设置？

Question

我的网站上有很多实例，其中图像 float 到文本的一侧。当文本足够长以环绕在图像下方时，我不希望它占据 div 的整个宽度，而是希望所有文本保持垂直对齐。

我可以通过将 overflow auto 设置为 p 标签来做到这一点。我不得不这样做很多次我正在考虑将此规则设置为所有 p 标签的全局规则。这样做有什么风险/缺点？我把它作为测试来做，快速浏览了一下，一切看起来都很好。

<div>
  <img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg" />

  <p>Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text Here is my text</p>
</div>

img {
  width: 200px;
  height: 200px;
  float: left;
}
div {
  width: 300px;
  margin: auto;
}
p {
  overflow: auto;
}

http://codepen.io/anon/pen/kdbJp

Answer 1

一如既往，这是一个判断电话。以我的经验，直接给标签设置样式会导致意想不到的副作用，并使长期维护变得更加困难。 (如果您实际上需要一个“p”标签作为后面的段落怎么办？

我的建议是在 div 上使用一个类，并在所有相关选择器前加上它。另请查看新的 html5 标签“figure”和“figcaption”。

.media-box {
  width: 300px;
  margin: auto;
}

.media-box img {
   /* ... */
}

.media-box p {
   /* ... */
}