包含 float 的 inline-block 对齐问题原理详解？
有两个兄弟元素，分别是行内块级。其中一个内部元素浮动，导致父级元素上移
如下：
<div style="border:1px solid blue; height:20px;">
<div style="display: inline-block; border:1px solid red">
<button>呵呵 1</button>
</div>
<div style="display:inline-block; border:1px solid #000000">
<div style="border:1px solid green">
<button style="float:left;">呵呵—— 1</button>
<button style="float:left;">呵呵—— 2</button>
<div style="clear:both;"></div>
</div>
</div>
</div>显示的结果是这样的
写回答
-
在不指定 vertical-align 時，默認即基線對齊。然而由於該 box 當中既沒有 block level box 也沒有 text（比如全是 floating boxes，沒有規範的可以提取基線的地方），導致對齊時以該元素底部而非基線爲基準，又因爲元素底部在基線以下，就會出現對齊時上移的情況。
只要添加 text 或者添加 block 使其成爲 block container box 即可解決這一問題。
也可以父元素全設置浮動（浮動元素默認左上角對齊，相當於變相修改 vertical-align）
<!DOCTYPE html> <title>box</title> <style> .inline-block { display: inline-block; } .float { float:left; } </style> <div> <div class="inline-block"> <div>Block</div> </div> <div class="inline-block"> Baseline <div class="float">Float</div> <div class="float">Float</div> </div> </div>把 Baseline 換成僞元素，文字內容換成零寬度空格（200B）或 Non-breaking space（00A0）即可隱藏對齊用文字。
之所以不改 vertical-align 是因爲經常出現對齊有偏差的情況（主要是就 input 與 button 而言），而且如果不能保證高度一致，會導致無法基線對齊（比如問題中圖二）。
啊，纔看到樓主自己已經找到解決方案了（之前的注意力全在「呵呵」上，沒看見其它的是啥）。好在我本來就順便解釋了一下原理，答案懶得改了。
順便說一句，此時根本就不需要 clear:both，因爲
inline-blocks 會創建新的 Block formatting context，不影響外部的 float 和 clear
所以高度是會自適應浮動元素的。
2019-07-17 19:16:32赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
