为什么内联元素在浮动时表现得像块级元素?

时间:2016-07-19 17:25:08

标签: css css-float language-lawyer

CSS规范中的哪个位置定义了这种行为?

正如这两篇文章所述......

Smashing Magazine

  

当你浮动一个元素时,它就变成了一个块框

CSS Tricks

  

浮动的元素会自动display: block;

示例: https://jsfiddle.net/kennethcss/y6cmgubt/

a {
  /* for looks */
  background-color: #e1e1e1;
  line-height: 30px;
  text-align: center;

  /* Comment "float: left" out to test. Once the float is removed, neither
   * the height or width have any effect on the anchor because its default
   * display is inline.
   */
  height: 30px;
  float: left;
  width: 100px;
}
<nav>
  <a>Nav Item 1</a>
  <a>Nav Item 2</a>
  <a>Nav Item 3</a>
</nav>

4 个答案:

答案 0 :(得分:4)

此行为在此CSS2.1部分的第3点中定义:

  

9.7 Relationships between display, position, and float

     

影响方框生成和布局的三个属性 - displaypositionfloat - 互动如下:

     
      
  1. 如果display的值为none,则positionfloat不适用。在这种情况下,元素不会生成任何框。
  2.   
  3. 否则,如果position的值为absolutefixed,则该框绝对定位,float的计算值为none,并显示根据下表设置。该框的位置将由toprightbottomleft属性以及包含框的框确定。
  4.   
  5. 否则,如果float的值不是none,则该框会浮动,并根据下表设置display
  6.   
  7. 否则,如果元素是根元素,则根据下表设置display,除了在CSS 2.1中未定义list-item的指定值是否为{的计算值{1}}或block
  8.   
  9. 否则,剩余的display属性值将按指定应用。
  10.         

    list-item

在展示级别3中,此过程称为阻止

  

2.7. Automatic Box Type Transformations

     

某些布局效果需要blockificationinlinification的框类型,这会将框outer display type(如果不是nonecontents设置为blockinline(分别)。

     

这方面的一些例子包括:

     
      
  • 绝对定位或浮动元素blockifies框的显示类型。 [CSS2]
  •   

答案 1 :(得分:2)

它在Visual Formatting Model section 9.5.1

中定义
  

此属性指定框是否应向左,向右或根本不浮动。它可以为任何元素设置,但仅适用于生成非绝对定位的框的元素。该属性的值具有以下含义:

     

<强>左

     

该元素生成一个浮动到左侧的阻止框。内容从盒子的右侧开始流动,从顶部开始(以'clear'属性为准)。

     

从右

     

与'left'相似,除了盒子向右浮动,内容从盒子的左侧开始流动,从顶部开始。

答案 2 :(得分:-1)

因为<a>标记是内联元素。
在这里查看http://www.w3schools.com/html/html_blocks.asp
它应该对您有帮助,如果您只创建Capybara元素,它们也会内嵌浮动:https://jsfiddle.net/r4r11d3h/

答案 3 :(得分:-1)

更新:我接受了此answer。以下仍然是很好的信息,并为讨论增加了额外的背景。

这是来自规范(粗体)......

  

9.4.1阻止格式化上下文

     

浮动,绝对定位的元素,阻止容器(例如内联块,表格单元格和表格标题)不是块框,并且“溢出”的块框除了'可见'(除非该值已传播到视口时)为其内容建立新的块格式化上下文

     

在块格式化上下文中,框从一个包含块的顶部开始一个接一个地垂直排列。两个兄弟框之间的垂直距离由“边距”属性决定。块格式化上下文中相邻块级框之间的垂直边距折叠。

     

在块格式化上下文中,每个框的左外边缘触及包含块的左边缘(从右到左格式化,右边缘触摸)。即使存在浮动也是如此(尽管盒子的线框可能因浮动而缩小),除非盒子建立新的块格式化上下文(在这种情况下盒子本身可能因浮动而变窄)。 p>

https://www.w3.org/TR/CSS22/visuren.html#block-formatting

Up-voted @Paulie_D's answer因为它确实指向了CSS规范中对此行为进行身份验证的位置,但是,我没有接受他的回答,因为它无法解释为什么会发生这种情况。

关于块格式上下文的补充阅读: