javascript - 浮动元素和块级元素以及内联元素布局

Question

1 演示效果：http://runjs.cn/detail/ibjo3ywk

2 问题：
strong {

        **display: inline-block;**
        font-weight: normal;
        overflow: hidden;
    }
    
    上面的strong标签使用了inline-block，如果将其改为block，将会出现不同的效果，
    
    麻烦指点着两种效果的原因。
    
    ![图片描述][1]
    
    

Answer 1

主要原因是：紧接在浮动盒后面的行盒会因为浮动盒的出现而缩短。当左边的空间不足以容纳接下来的内容的话，紧接着的内容就会再下一行显示。

当设置为inline-block的时候，strong是作为行盒的整体。浮动元素浮动到strong元素的左边，但是由于strong作为一个行盒宽度已经无法被其父包含块所容纳，因此会被挤到下一行中。
布局基本上跟上图一直。

而设置为block的时候，缩短的行盒只是<a>标签，浮动元素只是浮动到<a>标签的左边，因此不会换行。而设置了overflow为hidden之后，文件的布局才表现成所显示的样子。

如果设置为inline-block的时候，里面的文字可以自动换行的话（行盒宽度就算因为浮动盒的出现而缩短，剩下的空间也可以容纳的话），就不会导致strong整体换行了。可以设置下strong的宽度为210px，让浮动盒的左边的空间足以容纳strong。

Answer 2

display:block
填充父元素整行（即使设置width小于父元素可填充宽度也会占据整行），高度可调正
display:inline
宽度高度都不可调整
display: inline-block;
不会占据父元素整行，宽高都可调整

Answer 3

第一反应使用inline-block应该是不换行，使用block则换行，但是测试之后发现和预想的刚好相反。

block元素宽度缺省是它的容器的100%，除非设定一个宽度

但是发现这句话在有元素浮动的时候是不正确的，block宽度缺省在又浮动元素的时候是容器的100%减去浮动元素的宽度，所以使用block时，span和strong并列。
使用inline-block就比较好理解了，inline-block的宽度应该是器文字的宽度，但是最大的宽度不超过容器的100%，这里的文字将strong元素撑到了最大就是容器的100%，所以加上浮动元素宽度超过了容器宽度就换行了。

Answer 4

谢邀

由这张图片可以看出来inline的时候，高度宽度是自动

inline-block的时候，是文字撑开的宽高，他会作为一个块级去计算位置

比如说这样，文字加上float的那个都不够一整行，那么就会在一行