我们在学习浮动属性或者工作的时候，往往会遇到父级边框塌陷的情况，如下面的情况：
HTML代码：（图片可自己找，插入即可）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
</div>
</div>
</body>
</html>CSS代码：
div {
margin: 10px;
padding: 5px;
}
#father {
border: 1px #000 solid;
}
.layer01 {
border: 1px #F00 dashed;
/* 设置右浮动 */
float: right;
}
.layer02 {
border: 1px #00F dashed;
/* 设置右浮动 */
float: right;
}
.layer03 {
border: 1px #060 dashed;
/* 设置左浮动 */
float: left;
}
.layer04 {
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
/* 设置右浮动 */
float: right;
width: 300px;
/* 清除左右浮动 */
clear:both;
}运行结果如下：
如图所示，三张图片和文本所在的盒子都在父级边框外面，这就是所谓的父级边框塌陷。
1、解决办法一：浮动元素后面添加空的div
HTML代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
</div>
<div class="clear"></div>
</div>
</body>
</html>注意，这里在后面添加了空的div
CSS代码如下：
div {
margin: 10px;
padding: 5px;
}
#father {
border: 1px #000 solid;
}
.layer01 {
border: 1px #F00 dashed;
/* 设置右浮动 */
float: right;
}
.layer02 {
border: 1px #00F dashed;
/* 设置右浮动 */
float: right;
}
.layer03 {
border: 1px #060 dashed;
/* 设置左浮动 */
float: left;
}
.layer04 {
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
/* 设置右浮动 */
float: right;
width: 300px;
/* 清除左右浮动 */
clear:both;
}
.clear{
/*清除左右浮动*/
clear: both;
/* 空的div可以不设置内外边距,当然这里不设置也行 */
margin: 0;
padding: 0;
}这里主要对空的div进行了清除左右浮动的操作，以此来解决父级边框塌陷的问题，在这基础上还对默认的内外边距进行了清零，也可不进行操作。清除左右浮动的操作已经可以解决父级边框塌陷的问题了。
2、解决办法二：设置父元素的高度
这个方法对于html代码不需要做任何修改
CSS代码修改如下：
div {
margin: 10px;
padding: 5px;
}
#father {
border: 1px #000 solid;
/* 给父元素设置高度，包裹浮动的子元素 */
height: 355px;
}
.layer01 {
border: 1px #F00 dashed;
/* 设置右浮动 */
float: right;
}
.layer02 {
border: 1px #00F dashed;
/* 设置右浮动 */
float: right;
}
.layer03 {
border: 1px #060 dashed;
/* 设置左浮动 */
float: left;
}
.layer04 {
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
/* 设置右浮动 */
float: right;
width: 300px;
/* 清除左右浮动 */
clear:both;
}这里仅仅对父元素设置了高度，使其能够包裹浮动的子元素。
3、解决办法三：父级元素添加overflow属性
这里也不需要对html代码进行修改。
CSS代码修改如下：
div {
margin: 10px;
padding: 5px;
}
#father {
border: 1px #000 solid;
overflow: hidden;
}
.layer01 {
border: 1px #F00 dashed;
/* 设置右浮动 */
float: right;
}
.layer02 {
border: 1px #00F dashed;
/* 设置右浮动 */
float: right;
}
.layer03 {
border: 1px #060 dashed;
/* 设置左浮动 */
float: left;
}
.layer04 {
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
/* 设置右浮动 */
float: right;
width: 300px;
/* 清除左右浮动 */
clear:both;
}这里对父级元素添加了overflow属性，下面会详细讲解一下overflow属性。
4、解决办法四：给父级元素添加伪类样式after
CSS中主要使用的伪元素选择器为“:before伪元素选择器”和“:after伪元素选择器”
:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。:after伪元素选择器使用方法与其类似，但这是用于在被选元素的内容之后插入内容。
该解决办法中html代码不变，CSS代码修改如下：
div {
margin: 10px;
padding: 5px;
}
#father {
border: 1px #000 solid;
}
.layer01 {
border: 1px #F00 dashed;
/* 设置右浮动 */
float: right;
}
.layer02 {
border: 1px #00F dashed;
/* 设置右浮动 */
float: right;
}
.layer03 {
border: 1px #060 dashed;
/* 设置左浮动 */
float: left;
}
.layer04 {
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
/* 设置右浮动 */
float: right;
width: 300px;
/* 清除左右浮动 */
clear:both;
}
#father:after{
content: '';
/* 将插入的元素设置为块级元素 */
display: block;
clear: both;
}5、overflow属性
overflow为溢出（容器），当内容超出容器时只需添加overflow属性值为hidden， 就可以把超出容器的部分隐藏起来。
如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto；
overflow：auto 属性如果超出就出现滚动条，没有超出则不出现滚动条这样就可以出现滚动条，
滚动条也可以单独设置，例如overflow-x：hidden；overflow-y：auto；这样就只能看见垂直方向的滚动条了。如果单独定义x轴或者y轴的时候，两个属性都需设置属性值。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow属性</title>
<style>
div{
border: 1px solid red;
background-color: aqua;
height: 50px;
}
</style>
</head>
<body>
<div>三甲胺顺城大街奶茶店加拿大成绩你大几奶萨较大奶萨插卡机到哪科技三大加拿大籍那巨大年级上到哪解散等级三等级城市建设吃的是草百年党史承担你吃的啥悲惨世界好吧好擦不哈大撒把手机哈吃吧等级差不大基层党建撒代缴社保调查第八集传达撒不擦就简单粗暴但是吧超级兵洒基吃吧登记决策部署久啊不对劲啊茶吧机大撒把成绩就差不多就撒不参加上班彩打机</div>
</body>
</html>原始效果：
（1）添加属性overflow:hidden;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow属性</title>
<style>
div{
border: 1px solid red;
background-color: aqua;
height: 50px;
overflow: hidden;
}
</style>
</head>
<body>
<div>三甲胺顺城大街奶茶店加拿大成绩你大几奶萨较大奶萨插卡机到哪科技三大加拿大籍那巨大年级上到哪解散等级三等级城市建设吃的是草百年党史承担你吃的啥悲惨世界好吧好擦不哈大撒把手机哈吃吧等级差不大基层党建撒代缴社保调查第八集传达撒不擦就简单粗暴但是吧超级兵洒基吃吧登记决策部署久啊不对劲啊茶吧机大撒把成绩就差不多就撒不参加上班彩打机</div>
</body>
</html> 效果如下：
可以看到，overflow：hidden会把超出盒子的部分隐藏，也可以理解为切断。
（2）添加属性overflow-x:hidden;overflow-y:auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow属性</title>
<style>
div{
border: 1px solid red;
background-color: aqua;
height: 50px;
overflow-x: hidden;
overflow-y: auto;
}
</style>
</head>
<body>
<div>三甲胺顺城大街奶茶店加拿大成绩你大几奶萨较大奶萨插卡机到哪科技三大加拿大籍那巨大年级上到哪解散等级三等级城市建设吃的是草百年党史承担你吃的啥悲惨世界好吧好擦不哈大撒把手机哈吃吧等级差不大基层党建撒代缴社保调查第八集传达撒不擦就简单粗暴但是吧超级兵洒基吃吧登记决策部署久啊不对劲啊茶吧机大撒把成绩就差不多就撒不参加上班彩打机</div>
</body>
</html>效果如下：
overflow常见属性值：visible，hidden，auto和scroll
visible为overflow 的默认值，为超出显示；
hidden为超出隐藏；
auto为自动，即超出会出现滚动条， 不超出就没有滚动条；
scroll为内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。此时无论元素是否溢出，元素框中的水平和竖直方向的滚动条都始终存在。
overflow常用的用法：
第一种用法：解决margin-top的传递问题
margin-top的传递问题:子元素的margin-top会把父元素一起带下来，给父元素加overflow:hidden即可解决
第二种用法：清除浮动带来的影响 --- 父元素高度塌陷
父元素高度没有设置的情况下，子元素全部浮动，就会导致父元素高度塌陷。解决办法之一就是给父元素设置overflow。如上面解决办法三。
万能清除法
overflow:hidden
clear:both
第三种用法：显隐动画 --- 超出隐藏
第四种用法：单行文本超出省略
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
