学海无涯，不要沉浸在知识的海洋里，迷失自己。

要知道自己想要什么，抓住重点，不忘初心。

这个世界上百分之20的人，掌握着百分之80的财富。

接下来一系列教程，就带领大家抓住重点，一起做那百分之20的人。

往期知识点回顾：

重点属性-display

重点属性-position

重点属性-float

重点属性-flex

重点属性-media

重点属性-background

一、重点属性-overflow

overflow

属性指定如果内容溢出一个元素的框，会发生什么。

visible

默认值。内容不会被修剪，会呈现在元素框之外。

hidden

内容会被修剪，并且其余内容是不可见的。

scroll

内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit

规定应该从父元素继承 overflow 属性的值。

二、实践案例

如何使用滚动条来显示元素内溢出的内容

div{
background-color:#ff9900;
width:150px;
height:150px;
overflow: scroll;
}
复制代码

如何隐藏溢出元素中溢出的内容

div{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden
}
复制代码

三、面试题

浮动是如何产生的？

一般浮动是什么情况呢？一般是一个盒子div里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。

浮动会产生什么副作用？

1、背景不能显示

由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开

如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

如何清除浮动

1、对父级设置适合CSS高度

2、clear:both清除浮动

为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

3、父级div定义 overflow:hidden

对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。