19.overflow属性设置溢出内容

首先代码部分是一个简单的管理系统头部：

主题div Class为：header

标题div Class为：nav

标题中含有ul标签和六个li标签

CSS样式如下：

*{
			margin: 0px;
			padding: 0px;
		}
		.header{
			text-align: center;
			font-size: 24px;
		}
		.nav{
			border:1px solid #000;
			height:30px;
			line-height: 30px;
			padding-left: 20px;
			/* overflow: hidden; */
		}
		.nav ul{
			list-style: none;
		}
		.nav ul li{
			width: 20%;
			float: left;
		}
		ul{
			text-align: center;
		}

 因为li标签设置的宽度为20%，所以五个li标签会有一个溢出：

这时可以用 overflow属性来操作溢出的元素

吧CSS代码中注释的overflow属性释放后结果如下：

 overflow属性可选值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

 值得注意的是scroll值和auto值的区别：

scroll值带有上下左右四个方向的滚动条：

auto值只带有上下方向的滚动条：