CSS中 神通广大的overflow:hidden

---

前言

在CSS样式的学习过程中，overflow:hidden经常在搭建样式的各种场合中，发挥着自己的作用。上一篇博客所提及到的超出盒子边界的隐藏，使用之后很好的实现了预期的效果。当然它的作用不仅限于此，在清除浮动，解决嵌套块元素垂直边距的塌陷的问题时，都能发挥妙用。下面我来一一介绍。

---

一、溢出隐藏

溢出隐藏功能，在W3C的官方文档中可以看到，hidden属性的官方解释如下：内容会被修建，并且其余内容是不可见的。

举个栗子：当我们在固定的盒子里面放入大段文字的时候，由于文字过多，盒子装不下，导致文字直接溢出盒子。

当然我们肯定不能任由内容溢出，这时候就要请出overflow:hidden了，在盒子样式中加上overflow: hidden;，效果如下：盒子不是装不下嘛，那我就直接不装了，当场清理门户！

二、清除浮动

说到清除浮动，其实又可以重新开一篇文章，好好说道说道。但我们今天的主角是overflow呀，毕竟有主角光环，关于清除浮动的原理之类的，我们在下一篇再好好侃一侃。

---

首先简单说一下为什么要清除浮动。由于一些父级盒子在很多情况下，不知道里面要装多少个子盒子，所以不方便设置高度。此时我们的子盒子进行浮动后，由于浮动的盒子不占有位置，且父级的盒子高度为0。从而影响了下面的标注流盒子。导致整个布局结构错乱。所以我们要使用`overflow:hidden;`来清除浮动。

---

老规矩，咱先来举个栗子：
有天大娃，二娃，三娃在爷爷家吃饭，由于没关门，妖怪突然闯了进来，场面逐渐尴尬了起来，怎么样才能避免妖精突然闯入的尴尬场景呢。恩，关上门就好了呀。

下面我们来关门！当我们给父盒子加上overflow:hidden;的时候，奇迹就出现了。父盒子就有了高度，整体的布局也不会错乱。实现了我们清除浮动的效果，不知道大家都明白了没有呢。

---

三、嵌套块元素垂直边距的塌陷

对于两个嵌套关系（父子关系）的块级元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大的上外边距值。
理论还得结合实际来分析，下面来看栗子：
定义一个父盒子里面装着一个子盒子。如图一所示。接下我们想让父盒子下去一点，于是给父盒子加了一个margin-top = 50px; 如图二所示，父盒子完美下来50px；紧接着我们想让子盒子也离父盒子一段距离，于是又给子盒子加上了一个margin-top = 100px; ，如图三。发现结果并不是我们想的那样，子盒子并没有下来，反而父盒子下来了100px的距离。我们把这种现象叫做嵌套块元素垂直边距的塌陷问题。

发现问题，我们肯定要解决问题。这时候我们的overflow:hidden就发挥作用了。在给我们的父盒子样式中加入

overflow: hidden;

此时盒子的样式就实现了我们想要的结果。这一部分就涉及到了触发块级格式化上下文(BFC)原理了，有空我们来详细介绍哈。

当然解决嵌套块元素垂直边距的塌陷还有其他的方法，比如可以用给父元素定义上边框，还可以用给父元素定义上外边距的方法。

总结

这一期的介绍overflow:hidden;就到这里啦，小伙伴们你们说这行代码是不是很神通广大呢~
（PS:最近实在是太忙了，不过紧赶慢紧终于在1024，这个美妙的一天中赶了出来，哈哈。不过很多地方写的比较着急，希望大佬们批评指正。）