当div在浮动项目下方坍塌时保持div的垂直间距

Question

我有一个div / icon（#user-initials）浮动到另外两个div的左边：.employee-name和.status。

如果.employee-name行恰好包含两行，则.status div将被推送到＃user-initials下面的左侧。这很好用。

我尝试做的是将原始间距保留在.status-name（11px）的.status之上。然而，一旦它低于浮动项目，它的边距就会减少到大约6px。请参阅下面的屏幕截图以获得更好的想法：

小提琴：https://jsfiddle.net/kfjtnk9r/1/

＆＃13;

＆＃13;

.container {
  width: 220px;
  background-color: #fff;
}
.user_img_color,
.user_img_color_large {
  background: #8aa943;
  border-radius: 40px;
  color: #fff;
  float: left;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  z-index: 1;
  margin-right: 10px;
}
.employee-name {
  word-wrap: break-word;
}
.status {
  margin-top: 4px;
}
.welcome-message {
  margin-top: 10px;
  font-size: 11px;
  line-height: 15px;
}
div.status-indicator {
  display: inline-block;
  height: 8px;
  width: 8px;
  content: " ";
  line-height: 14px;
  background: #f5c002;
  border-radius: 8px;
  margin: 0 2px 0 0;
  vertical-align: middle;
}
div.status-message {
  display: inline-block;
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  vertical-align: middle;
}

＆＃13;

<div class="container">

  <div class="clearfix">
    <div id="user-initials" class="inline-block">
      <div class="user_img_color user_img_color-pending">TH</div>
    </div>
  </div>


  <div class="employee-name">Name Namington</div>

  <div class="status">
    <div class="status-indicator status-indicator-complete"></div>
    <div class="status-message">Status Message</div>
  </div>


  <div class="welcome-message">
    Welcome message Welcome message
    <br>Welcome message Welcome message
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

我们非常感谢任何帮助......我已经尝试了一切。

编辑：添加了更好的截图图片

Answer 1

<强>解决方案
您可以将图标，名称和状态消息包装到display: flex;（称为 flexbox ）的容器中，如https://jsfiddle.net/wk79s3qf/1/

<强> Flexbox的
Flexbox 是一种新的CSS3功能，可让您轻松创建类似网格的布局，同时不需要margin和float以及其他技巧。

备忘单
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

浏览器支持
http://caniuse.com/flexbox

Answer 2

您的.status规则实际上是margin: 4px。将其更改为10px（或您喜欢的任何内容），它将起作用：

https://jsfiddle.net/c036a3mg/1/