前端学习之——overflow:hidden的两个作用

overflow:hidden

1. 作用一：隐藏溢出
   熟知的作用就是给父元素设置后，子元素若从父元素中溢出，溢出部分不会显示

2. 作用二：清除浮动
   子元素浮动时，给父元素设置overflow:hidden，父元素尝试隐藏子元素超出父元素的部分，但是因为子元素浮动了，父元素找子元素的下边界时犯迷糊，所以父元素自动增大以包住子元素，从而达到子元素好像没有浮动一样的效果。
   推广，对于兄弟元素，前一个兄弟开启浮动，后一个元素设置overflow:hidden，后一个元素清除了前一个元素浮动的效果，便排到前一个元素的右边去了。

总结：overflow设置为非visible的值时，开启了元素的bfc，拥有不被浮动元素覆盖的特点。