voerflow: hidden的多种作用

1. overflow溢出隐藏

给一个元素中设置overflow:hidden，该元素的内容若超出了给定的宽度和高度属性，超出的部分将会被隐藏，不占位。典型应用：单行/多行文字出现省略号。

单行文本出现省略号

1. 设置宽度
2. 溢出隐藏
3. 强制文字不折行
4. 文字以省略号的方式隐藏

/*css样式*/
p {
	margin: 100px auto;
	/* 设置宽度 */
	width: 300px;
	/* 溢出隐藏 */
	overflow: hidden;
	/* 强制文字不折行 */
	white-space: nowrap;
	/* 文字以省略号的方式隐藏 */
	text-overflow: ellipsis;
	background-color: #a4b0be;
}

/*html*/
<p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</p>

多行文本出现省略号

1. 设置宽度
2. 溢出隐藏
3. 弹性盒模型
4. 规定元素排列方式：垂直排列
5. 文字行数

/* css样式 */
p {
	margin: 100px auto;
	/* 设置宽度 */
	width: 300px;
	/* 溢出隐藏 */
	overflow: hidden;
	/* 弹性盒模型 */
	display: -webkit-box;
	/* 规定元素排列方式：垂直排列 */
	-webkit-box-orient: vertical;
	/* 文字行数 */
	-webkit-line-clamp: 2;
	background-color: #ced6e0;
}

/*html*/
<p>
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</p>

2. 清浮动

一般情况下，父盒子没有设置高度时，高度自适应内容的高度。但是当子元素全部设置为浮动后，子元素脱离标准流，不占位，父盒子由于检测不到子元素的高度，高度为0。

/*css样式*/
.father {
	border: 10px solid #aaa;
	width: 500px;
}
.father div {
	width: 100px;
	height: 100px;
	float: left;
}
.one {
	background-color: red;
}
.two {
	background-color: green;
}
.three {
	background-color: blue;
}

/*html*/
<div class="father">
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</div>

给父元素添加溢出隐藏属性

/*css样式*/
.father {
	border: 10px solid #aaa;
	width: 500px;
	overflow: hidden; /* 利用 overflow: hidden 清除浮动影响 */
}
.father div {
	width: 100px;
	height: 100px;
	float: left;
}
.one {
	background-color: red;
}
.two {
	background-color: green;
}
.three {
	background-color: blue;
}

/*html*/
<div class="father">
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</div>

扩展：利用 clearfix清浮动

1. display: block;确保元素是一个块级元素
2. clear: both不允许左右两边有浮动对象
3. content: ""这是伪元素:before 和 :after天生自带的属性，如果不写，伪元素不起作用

.clearfix :after {
    display: block;
    clear: both;
    content: "";
    /* 清除其他可能出现的样式 */
    height: 0;
    font-size: 0;
    overflow: hidden;
    visibility: hidden;
}
/* IE7 兼容问题 */
.clearfix {
    *zoom: 1;
}

3. 解决margin-top的传递问题

margin的兼容问题：(margin-top的传递问题) 大盒子里边嵌套小盒子，给小盒子加margin-top值，不但不能实现和大盒子之间的间距，反而传递到大盒子身上，导致整体下移。

/* css 样式 */
.father {
	width: 300px;
	height: 300px;
	background-color: grey;
}
.son {
	width: 100px;
	height: 100px;
	margin-top: 50px;
	background-color: red;
}

/*html*/
<div class="father">
	<div class="son"></div>
</div>

利用overflow: hidden解决margin兼容问题

.father {
	width: 300px;
	height: 300px;
	background-color: grey;
	overflow: hidden;
}
.son {
	width: 100px;
	height: 100px;
	margin-top: 50px;
	background-color: red;
}