一、溢出隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 100px;
background-color: greenyellow;
/* 溢出隐藏 */
overflow: hidden;
}
.demo1 {
width: 100px;
height: 100px;
background-color: turquoise;
}
.demo2 {
width: 100px;
height: 100px;
background-color: violet;
}
</style>
</head>
<body>
<div class="box">
<div class="demo1"></div>
<div class="demo2"></div>
</div>
</body>
</html>
如果父盒子没有设置固定高度或宽度时,子盒子会将父盒子的宽或高自动撑开;如果父盒子有固定高度或宽度时,且子盒子的高度或宽度大于父盒子,就会发生溢出。
1、父盒子没设置固定宽高
2、父盒子固定宽高,且大于子盒子
父盒子宽高各300px
3、父盒子固定宽高,且小于子盒子
(1)溢出
父盒子宽300px,高100px
(2)溢出隐藏
二、解除塌陷
父盒子高度不固定,子盒子添加margin-top:60px,我们发现只有第一个子盒子发生塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* width: 300px; */
/* height: 100px; */
background-color: greenyellow;
/* overflow: hidden; */
}
.demo1 {
width: 100px;
height: 100px;
margin-top: 60px;
background-color: turquoise;
}
.demo2 {
width: 100px;
height: 100px;
margin-top: 60px;
background-color: violet;
}
</style>
</head>
<body>
<div class="box">
<div class="demo1"></div>
<div class="demo2"></div>
</div>
</body>
</html>
1、父盒子添加overflow:hidden解除塌陷
2、子盒子添加浮动避免塌陷
子盒子添加float:left,为了看的更明显,父盒子设置width: 300px;height: 100px;
三、清除浮动
不设置父盒子的高度,高度随内容增加自适应高度,子盒子都使用浮动,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0。我们会发现父盒子背景色看不到,开发工具中显示父盒子高度为0。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* width: 300px; */
/* height: 100px; */
background-color: greenyellow;
/* overflow: hidden; */
}
.demo1 {
float: left;
width: 100px;
height: 100px;
margin-top: 60px;
background-color: turquoise;
}
.demo2 {
float: left;
width: 100px;
height: 100px;
margin-top: 60px;
background-color: violet;
}
</style>
</head>
<body>
<div class="box">
<div class="demo1"></div>
<div class="demo2"></div>
</div>
</body>
</html>
1、overflow:hidden清除浮动
在父盒子中添加overflow:hidden,父级的高度就随子盒子及子盒子内容的高度而自适应。
2、父盒子添加浮动
父盒子添加float: left;