Question

为什么这段代码（带有float属性）显示的a元素大于没有float属性的代码？

<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>

对不起我的英语，我不是母语为英语的人。

Answer 1

这是因为当你浮动一个元素时，它会自动变成一个块级元素（不需要声明display: block）。块级元素将允许您分别指定其宽度和高度。

删除float属性时，<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>

关于FLOAT的HTML

1 个答案: