css样式之inline-block元素

如下图，为什么和设为inline-block元素平级的浮动元素会掉上去？

这个效果其实是这样的，题主没有表述清楚：

第一张图，div.float在左边，是由于你的ul没有肃清外部li浮动的影响，ul自身的高度没有撑开，所以，虽然ul的宽度是占整行的，但是高度为0，这时分div.float会依照ul的高度为顶部对齐向左浮动，被浮动的li元素卡住了位置，所以显示在右侧， 你可以给ul手动设定一个高度(比如20px)，可以更明晰的看清形状，这是正常的状况

设置ul为inline-block以后，ul自身变成了一个行内块，不再占据整行，高度也撑开了，而且由于ul不是浮动元素，所以div.float会浮动到ul左侧，这也是正常的状况

至于你说的给ul设置了inline-block以后，div.float会掉上去，普通状况下是不会出现这种状况的，除非是外部容器全体宽度不够，浮动元素会换行陈列，那么为什么没设置inline-block的时分宽度是够的呢？ 能够是由于inline-block元素发生的多余空白间隙，正好招致超出了外部容器的宽度。