web前端--overflow用法详解

overflow三大作用

1、隐藏溢出的内容

例如：

#容器A{
	width：50px；
}

你好啊你好啊你好啊你好啊你好啊你好啊你好啊
你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊

字数过多，宽度较小，装不下自然就会超出容器。

overflow：hidden隐藏超出部分文字
auto 超出后会显示滚动条
scroll 永远有滚动条

2、解决外边距塌陷

在一个父元素中，子元素设置margin-top/bottom会塌陷给父元素，为防止这种现象发生，解决办法有：

设置父元素的padding、border、overflow：hidden。

3、解决浮动导致的父元素高度塌陷问题

父元素高度没有设置的情况下，子元素全部浮动，就会导致父元素高度塌陷。解决办法之一就是给父元素设置overflow。详情见下面代码。
overflow：hidden、auto、scroll均可。推荐使用hidden。这样父元素就会根据子元素或者子元素内容自适应变化。

.list1 {
            background: green;
            width: 800px;
            /* 6-内容溢出 */
            /* 溢出隐藏 */
            /* overflow: hidden; */
            /* 设置了之后，没有设置高度的父元素就会随着 */

            /* 溢出自适应,出现滚动条 */
            /* overflow: auto; */

            /* 溢出必出现滚动条 */
            /* overflow: scroll; */

            /* 溢出显示，不能清除浮动 */
            /* overflow: visible; */
        }