我如何使2个div互相浮动，但下面的内容不跟随？

Question

我有这个设置，使用HTML：

<h4 class="wrap-title">Name</h4>
                    <button class="btn btn-primary btn-xs title-button" ng-click="uploadNewImage()"><span class="glyphicon glyphicon-upload"></span> Upload</button>    
                    <p>{{venue.name}}</p>

和CSS：

.wrap-title {
  float:left;
  margin-right: 5px;
}

.title-button {
  cursor: pointer;
  margin: 10px 0px;
  float:none;
}

我如何将奶油放在“名字”下面？提前致谢！我无法为我的生活弄清楚出于某种原因。

Answer 1

您需要清除浮动：

p {
clear:left:
}

Answer 2

将浮动包装在div中并使用clearfix

可能会更清晰一些

<div class="clearfix">
   <h4 class="wrap-title">Name</h4>
   <button class="btn btn-primary btn-xs title-button" ng-click="uploadNewImage()">
       <span class="glyphicon glyphicon-upload"></span> Upload
    </button>    
</div>
<p>{{venue.name}}</p>

这里是clearfix css

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

以下是html5样板中给出的解释

Clearfix：包含浮动对于现代浏览器

1. 当contenteditable属性包含在文档中的任何其他位置时，空格内容是避免Opera错误的一种方法。 否则会导致空间出现在元素的顶部和底部 接收clearfix课程。
2. 仅在使用时才需要使用table而不是block :before包含子元素的上边距。