關於FLOAT的HTML

爲什麼此代碼（帶有float屬性）顯示的a元素比沒有float屬性的代碼大？關於FLOAT的HTML

<html> 

    <head> 

     <style> 


     a { 
      float: left; /* this is the property */ 
      height: 40px; 
      line-height: 40px; 
      padding-left: 0.8em; 
      padding-right: 0.8em; 
      border-top-left-radius: 8px; 
      border-top-right-radius: 8px; 
      background-image: url(images/headerTiny.png); 
      background-repeat: repeat; 
     } 

     </style> 

    </head> 

    <body> 
     <a href="#">Box Title</a> 

    </body> 

</html>

對不起，我不是英語母語的人。

來源

2015-01-12 Juan Antonio Lucena

這是因爲當你浮動一個元素時，它會自動變成塊級元素（不需要聲明display: block）。塊級元素將允許您分別指定其寬度和高度。

當您刪除浮動屬性時，<a>元素默認爲內聯元素（默認爲display: inline）。內聯元素不響應寬度和高度定義。

您可以看到下面的代碼片段，並比較同一元素的浮動和未浮動版本。

a { 
 
    height: 40px; 
 
    line-height: 40px; 
 
    padding-left: 0.8em; 
 
    padding-right: 0.8em; 
 
    border-top-left-radius: 8px; 
 
    border-top-right-radius: 8px; 
 
    background-color: #eee; 
 
    background-repeat: repeat; 
 
} 
 

 
a.float { 
 
    float: left; 
 
} 
 

 
a.nofloat { 
 

 
}

<a class="float" href="#">Box Title (floated)</a> 
 

 
<a class="nofloat" href="#">Box Title (no float)</a>

來源

2015-01-12 12:49:24 Terry

關於FLOAT的HTML

回答

相關問題