目录
1. overflow定义和属性值
2.属性效果展示
2.1 overflow：visible；不裁剪超出盒子的部分
2.3 overflow：scroll 滚动条
2.3.3 overflow：scroll 强制滚动条
2.4 overflow：inherit 继承父元素overflow
ps
1. overflow定义和属性值
overflow 属性规定当内容溢出时发生的事情
overflow有以下几种属性值：
1.overflow：visible；不裁剪超出盒子的部分
2.overflow：hidden；将超出盒子部分的内容隐藏
3.overflow-x：scroll；横轴强制出现滚动条
4.overflow-y:scroll 纵轴强制出现滚动条
5.overflow：scroll x轴和y轴都有滚动条
6.overflow：auto；自动判断是否出现滚动条
7.overflow：inherit；从父元素继承overflow属性的值
overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。
2.属性效果展示
2.1 overflow：visible；不裁剪超出盒子的部分
overflow：visible 不对属性样式进行修改
代码：
<style> .a{ width: 200px; height: 100px; background-color: aliceblue; } </style> </head> <body> <div class="a"> 我们中国人常说，嗜欲深者天机浅，嗜欲浅者天机深，就是说一个人如果一味沉溺于感官享受，这种人的智慧一定很浅薄。 只有从声色繁华中超脱出来，宁静沉思的人，才能具有把握纷繁人生和无穷宇宙的大智慧。而浅薄或智慧，完全在自己。 </div> </body>
2.2 overflow：hidden；将超出盒子部分的内容隐藏；清除浮动
overflow：hidden 会将超出盒子的部分完全隐藏起来，并且还可以用来清除子元素内的浮动
首先来看一下他的隐藏效果
可以看到该属性把超出盒子部分的文本完全隐藏了起来
css
<style> .a{ width: 200px; height: 100px; background-color: aliceblue; overflow: hidden; } </style>
清除浮动：
代码：
<style> .a{ width: 200px; background-color: rgb(42, 132, 210); } .p1{ background-color: aqua; float: left; } .p2{ background-color: azure; float: left; } .p3{ background-color: red; float: left; } </style> </head> <body> <div class="a"> <p class="p1">你好</p> <p class="p2">你好</p> <p class="p3">你好</p> </div> </body>
代码原效果：
原效果中并没有设置父元素高度，所以就造成了高度塌陷，当添加了overflow：hidden 后就解决了这个问题
css：
.a{ width: 200px; background-color: rgb(42, 132, 210); overflow: hidden; } .p1{ background-color: aqua; float: left; } .p2{ background-color: azure; float: left; } .p3{ background-color: red; float: left; }
2.3 overflow：scroll 滚动条
2.3.1 overflow-y: auto; overflow-x: hidden;
y轴判断是否有滚动条，x轴上滚动条隐藏
css
<style> .a{ width: 200px; height: 100px; background-color: aliceblue; overflow-y: auto; overflow-x: hidden; } </style>
2.3.2 overflow-x: auto; overflow-y: hidden;
这里因为x轴上并未超出盒子所以不需要滚动条，auto也就没有显示滚动条
css
<style> .a{ width: 200px; height: 100px; background-color: aliceblue; overflow-x: auto; overflow-y: hidden; } </style>
2.3.3 overflow：scroll 强制滚动条
不管内容是否超出都会出现滚动条
css
<style> .a{ width: 200px; height: 100px; background-color: aliceblue; overflow:scroll } </style>
2.4 overflow：inherit 继承父元素overflow
可以看到下面的样式中有两个滚动条，内部样式是继承其父元素的
代码：
<style> .a { width: 200px; height: 100px; background-color: aliceblue; overflow: scroll } .b { overflow: inherit; } </style> </head> <body> <div class="a"> 我们中国人常说 <div class="b">嗜欲深者天机浅，嗜欲浅者天机深，就是说一个人如果一味沉溺于感官享受，这种人的智慧一定很浅薄。 只有从声色繁华中超脱出来，宁静沉思的人，才能具有把握纷繁人生和无穷宇宙的大智慧。而浅薄或智慧，完全在自己。</div> </div> </body>
ps
如果有什么写的不好的地方还请各位大佬指点一二，不胜荣幸！
