TA貢獻1831條經驗 獲得超4個贊
首先，很贊成樓主的學習態度！深究原理，才能將技術運用自如。
不知道樓主聽過 BFC 沒，即 Block Formatting Context（塊級格式化范圍），指的是由于元素使用了某些CSS屬性，從而影響了它周圍元素（包括嵌套元素）和自身的布局呈現方式。通俗的來講，它就是一種布局方式，也許你之前用過這種方法來處理頁面布局的兼容性，但是你可能并不知道BFC這樣一個概念。
要形成BFC，需要具備以下條件中某一個：
float的值為”left” 或 “right”
overflow的值為 hidden、auto、scroll、overflow-x、overflow-y、overlay其中一個
display的值為 “table-cell”, “table-caption”, or “inline-block”中的任何一個
position的值為 “absolute” 或 “fixed”中的任何一個
樓主使用的是 overflow:hidden,導致了右邊的div不會和左邊左浮動的div進行左邊界重疊，而是右邊div的左邊界緊挨著左浮動div右邊界。
這正是 BFC 的一個應用。因為右邊div發生BFC后，導致它塊級元素產生自包裹行為，填滿左浮動div占據的剩余空間。當然你可以使用 overflow：auto|scroll|overflow-x|overflow-y|overlay 也能實現此類效果。
至于 overflow: hidden 為什么會引發 BFC，誰知道呢！因為它不是規范，到目前為止也沒有寫進規范，開發者更多的是把它當做一種解決方案！
舉報