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

问题描述

问 题

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

2 问题：
strong {

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

解决方案

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

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

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

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

这篇关于javascript - 浮动元素和块级元素以及内联元素布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！