使用自動高度與浮動

Question

當使用浮動自動高度它不工作，但當刪除浮動其工作正常。如何解決它？

有DIV具有自動高度（關於我們），裏面是另一個DIV（公司簡介標題p）與浮動離開，但內容是溢出怎麼能與內自動高度DIV所有內容嗎？

http://jsfiddle.net/haeb0q8d/1/

.aboutus { 
 
\t position: relative; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
\t height: auto; 
 
\t background: #333333; 
 
} 
 

 
.aboutus-title div h1{ 
 
\t text-align: center; 
 
\t text-transform: uppercase; 
 
\t font-size: 24px; 
 
\t padding-top: 80px; 
 
\t color: #fcd803; 
 
} 
 

 
.aboutus-title hr { 
 
\t margin: 0 auto; 
 
\t border: 0; 
 
    height: 1px; 
 
    background: #333; 
 
    margin-top: 30px; 
 
    width: 60px; 
 
} 
 

 
.aboutus-detail { 
 
\t width: 100%; 
 
} 
 

 
.aboutus-detail p{ 
 
\t text-align: center; 
 
\t color: #fcd803; 
 
\t line-height: 25px; 
 
\t font-size: 17px; 
 
\t margin-bottom: 30px; 
 
\t padding-right: 30px; 
 
\t padding-left: 30px; 
 
    float: left; 
 
}

<div class="aboutus" id="aboutus"> 
 
    <div class="aboutus-title"> 
 
    <div><h1>about</h1></div> 
 
    <hr> 
 
    <div class="aboutus-detail"> 
 
     <p> 
 
     We are a tight knit team of digital thinkers, designers and<br> 
 
     developers, working together to create fresh, effective projects<br> delivered personally. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你要清楚浮球隨clear: both。

.aboutus { 
 
    position: relative; 
 
    z-index: 2; 
 
    width: 100%; 
 
    height: auto; 
 
    background: #333333; 
 
} 
 
.aboutus-title div h1 { 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-size: 24px; 
 
    padding-top: 80px; 
 
    color: #fcd803; 
 
} 
 
.aboutus-title hr { 
 
    margin: 0 auto; 
 
    border: 0; 
 
    height: 1px; 
 
    background: #333; 
 
    margin-top: 30px; 
 
    width: 60px; 
 
} 
 
.aboutus-detail { 
 
    width: 100%; 
 
} 
 
.aboutus-detail p { 
 
    text-align: center; 
 
    color: #fcd803; 
 
    line-height: 25px; 
 
    font-size: 17px; 
 
    margin-bottom: 30px; 
 
    padding-right: 30px; 
 
    padding-left: 30px; 
 
    float: left; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="aboutus" id="aboutus"> 
 
    <div class="aboutus-title"> 
 
     <div> 
 
      <h1>about</h1> 
 
     </div> 
 
     <hr> 
 
     <div class="aboutus-detail"> 
 
      <p>We are a tight knit team of digital thinkers, designers and 
 
       <br>developers, working together to create fresh, effective projects 
 
       <br>delivered personally.</p> 
 
     </div> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div>