我如何使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. 只有在使用:before包含子元素的上邊距:before ，才需要使用table而不是block 。