css 浮动：清除和浮动 none 不起作用

Question

这是我的代码：

<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>

我遇到的问题是第一个和第二个短语，我试图打破这两个元素的浮动并得到类似这样的东西：

我有这些：

但是我不能，我一直在做clear: both;和浮动：none；使用缓冲区并将 class 放在两个对象上，但它们与浮动效果粘在一起，这是我的 CSS 代码：

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

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

我做错了什么吗？

Answer 1

我个人更喜欢使用 flexbox 来处理这种事情，但这里有一个浮动解决方案。将它们包含在 div 中会更整洁，您可以对其应用额外的样式，让段落作为块元素发挥作用。但是，如果您不将浮动元素的宽度设置为占用更多 space.

，则浮动元素会希望彼此相邻。

#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>

Answer 2

不太确定这个问题。但让我们试一试。

所以你想把两个段落分开？看来您的段落可能有 display: inline-block;。所以从 css 中删除你的 buffer class 并添加这个。

#root p.buffer {
    display: block;
}

css 浮动：清除和浮动 none 不起作用

css float: Clear and float none doesnt work

css

css-float

reactjs