css float：清除并浮动都不起作用

问题描述

这是我的代码：

<div id="root">
   <img src={clock} alt="clock" title="Fast and simple!" id="clockEslogan"/>
   <p className="phrase">Know developers for your proyects in no time</p>
   <p className="buffer"></p>
   <p className="phrase">Join open-source proyects in no time</p>
</div>

我遇到的问题是第一个和第二个短语，我试图打破两个元素的浮动，并具有以下内容：

我正在吃这些：

但是我不能，我一直在做明确的事情：浮动：无；用一个缓冲区并在两个对象上放一个类，但是您将它们与float效果粘在一起，这是我的CSS代码：

#clockEslogan {
  width: 120px;
  float: left;
  margin-right: 15px;
}

.buffer {
  clear: both;
  float: none;
}

我在做错什么吗？

解决方法

我个人更喜欢将flexbox用于此类事情，但这是一个浮动解决方案。将它们包含在div中可以使它更加整洁，您可以对其应用额外的样式，然后让段落作为块元素来完成它们的工作。但是，如果不将浮动元素的宽度设置为占用更多空间，它们将希望彼此相邻放置。

#clockEslogan {
  width: 120px;
  float: left;
  margin-right: 15px;
  background:#ccc;
  padding:20px;
}
#phrase {
/*No floats here*/
}
/*set a width here if you need to */
#phrase-container {
float:left;
}
#buffer {
clear:both;
}

<div id="clockEslogan">
  [Pretend I'm an Image]
</div>
<div id="phrase-container">
  <p class="phrase">Know helpers for your project in no time</p>
  <p class="phrase">Join open-source projects in no time</p>
</div>
<div id="buffer"></div>
<div>More content to demonstrate the flow;</div>

,

不确定这个问题。但是，让我们尝试一下。

因此，您想将两段分开吗？您的段落似乎可能带有RichTooltip。因此，从CSS中删除您的display: inline-block;类并添加它。

buffer