web前端--overflow用法详解

<>overflow三大作用

<>1、隐藏溢出的内容

例如：
#容器A{ width：50px； } <div id=“A“>你好啊你好啊你好啊你好啊你好啊你好啊你好啊
你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊 你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊</div>
字数过多，宽度较小，装不下自然就会超出容器。

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;
*/ }

• « 上一篇：计算机二级Python等级考试题型总结
• » 下一篇：单例模式详解----懒汉式/饿汉式（C++实现）