CSS规范中的哪个位置定义了这种行为?
正如这两篇文章所述......
当你浮动一个元素时,它就变成了一个块框
浮动的元素会自动
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>
答案 0 :(得分:4)
此行为在此CSS2.1部分的第3点中定义:
9.7 Relationships between
display
,position
, andfloat
影响方框生成和布局的三个属性 -
display
,position
和float
- 互动如下:
- 如果
display
的值为none
,则position
和float
不适用。在这种情况下,元素不会生成任何框。- 否则,如果
position
的值为absolute
或fixed
,则该框绝对定位,float
的计算值为none
,并显示根据下表设置。该框的位置将由top
,right
,bottom
和left
属性以及包含框的框确定。- 否则,如果
float
的值不是none
,则该框会浮动,并根据下表设置display
。- 否则,如果元素是根元素,则根据下表设置
display
,除了在CSS 2.1中未定义list-item
的指定值是否为{的计算值{1}}或block
。- 否则,剩余的
醇>display
属性值将按指定应用。
list-item
在展示级别3中,此过程称为阻止:
2.7. Automatic Box Type Transformations
某些布局效果需要blockification或inlinification的框类型,这会将框outer display type(如果不是
none
或contents
设置为block
或inline
(分别)。这方面的一些例子包括:
- 绝对定位或浮动元素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规范中对此行为进行身份验证的位置,但是,我没有接受他的回答,因为它无法解释为什么会发生这种情况。
关于块格式上下文的补充阅读: