奇怪的標籤定位

我已經在容器標籤內放置了兩個div。容器只是集中和修復內容。奇怪的標籤定位

我想要在網站底部有空間，在home-segment和瀏覽器底部之間。但由於某些原因，bottom-spacer漂浮在home-segment以上。我如何將它移動到home-segment以下？

<div class="container"> 

    // Content 

    <div class="home-segment"> 
     <div class="col w33 col-first"> 
      <h2>A title</h2> 
      <p>Lorem ipsum.</p> 
     </div> 
     <div class="col w33"> 
      <h2>Hey there.</h2> 
     </div> 
     <div class="col w33 col-last"> 
     </div> 
    </div> 

    <div class="bottom-spacer"></div> 

</div>

CSS：

/* Home Page Columns */ 

.home-segment { width: 830px; float: left; } 
.col-first { margin-left: 0 !important; } 
.col.w33 { width: 220px; min-height: 200px; max-height: 200px; border: 1px solid #D9D4D4; background: #fff; margin-right: 15px; } 
.col.w33 h2 { font-size: 18px; margin-bottom: 10px; } 
.col-last { margin-right: 0 !important; } 
.col { display: block; float: left; position: relative; overflow: hidden; padding: 10px; } 

.bottom-spacer { padding-bottom: 25px; }

來源

2013-12-10 zzwyb89

它轉移到top因爲你不清除浮動元素

添加clear: both;到.bottom-spacer

.bottom-spacer { clear: both;padding-bottom: 25px; background: #f00;}

Demo

爲行爲詳細的解釋，大家可以參考我的答案here和here

來源

2013-12-10 15:09:27

我想通了，忘了'明確：both'。謝謝！ – zzwyb89

奇怪的標籤定位

回答

相關問題