css中overflow:hidden的使用方法

小编给大家分享一下css中overflow: hidden的使用方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联-专业网站定制、快速模板网站建设、高性价比大兴安岭网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式大兴安岭网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖大兴安岭地区。费用合理售后完善，10年实体公司更值得信赖。

溢出隐藏

就是隐藏超出规定高度的文本或者图像信息。

	
	
	
		div {background-color: yellow;width: 350px;height: 100px;overflow: hidden;}
	


元素中的内容超出了给定的宽度和高度属性，overflow属性
可以确定显示的方式，以及是否显示滚动条。
这个属性定义溢出元素内容区的内容会如何处理。
如果值为 hidden，则隐藏超出范围的部分。
如果值为 scroll，则显示滚动条。
如果值为 visible，则超出部分会呈现在元素框之外。
如果值为auto，则为自动；文本超出元素框，则显示滚动条，没有超出，则不显示滚动条。
如果值为inherit，则继承父元素的overflow属性的值。

下图分别是值为hidden和值为auto时截取

还有一个是单行显示文本信息，超出部分用省略号显示（强调一下：必须是一行文本显示才有效哦！）

div {
    background-color: yellow;
    width: 350px;
    margin: 100px auto;
    white-space: nowrap;/*强调文本在一行内显示*/
    overflow: hidden;/*溢出内容为隐藏*/
    text-overflow: ellipsis;/*溢出文本显示省略号*/
    }

清除浮动
布局的时候经常会用这种左右布局：一个父盒子，父盒子中包含 left 和 right 两个 child 盒子。但是 child 的内容个数大小都不确定，也就不能给父盒子固定的高度，父盒子高度就需要根据 child 盒子高度来改变。下面我们来了解一下！

下面是父盒子给了200px的高度，两个 child 盒子左右浮动，显示是没有问题的。

	
	
	
		* {margin: 0;padding: 0}
		.header {background-color: #333;color: #fff;text-align: center;height: 80px;line-height: 80px;}
		.father_box {width: 500px;height: 200px;margin: 0 auto;background-color: yellow;}
		.child_left {width: 100px;height: 100px;background-color: blue;float: left;}
		.child_right {width: 200px;height: 150px;background-color: blue;float: right;}
		.footer {background-color: #333;color: #fff;text-align: center;height: 80px;line-height: 80px;}
	


	header在这儿