<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 方式一：给父级元素定义一个边框 */
/* .father{
width: 300px;
height: 300px;
background: red;
margin-top:30px;
border: 1px solid;
}
.son{
width:200px;
height:200px;
background: skyblue;
margin-top: 30px;
}
*/
/* 方式二：给父级元素定义一个内边距 */
.father{
width:300px;
height:300px;
background: red;
margin-top: 30px;
padding: 1px;
}
.son{
width:200px;
height:200px;
background: skyblue;
margin-top: 30px;
}
/* 方式三：给父级元素定义一个overflow:auto或hidden; */
/* .father{
width:300px;
height:300px;
background: red;
margin-top: 30px;
overflow: auto;
overflow: hidden;
}
.son{
width: 200px;
height:200px;
background: deepskyblue;
margin-top: 30px;
} */
/* 方式四：直接在父类设置height */
/* .father{
border: 1px solid blue;
height: 300px;
}
.son{
width: 200px;
height: 200px;
background: deepskyblue;
margin-top: 30px;
} */
/* 方法五：伪类after */
/* #father:after{
display: block;
content:"" ;
clear:both;
}
.son{
width: 200px;
height: 200px;
background: skyblue;
border-top: 30px ;
} */
/* 方式六：父元素中最后一个块元素的clear：both; */
/* .father{
margin: 0 auto;
width:600px;
border: 1px solid red;
}
.son{
float: left;
width: 200px;
height: 200px;
background: deepskyblue;
}
.sonn{
float: left;
width: 200px;
height: 200px;
background: deepskyblue;
}
.class{
clear: both;
}
.text{
height: 300px;
background: black;
}
*/
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
<div class="sonn">
</div>
<div class="class">
</div>
<div class="text">
</div>
</div>
</body>
</html>
609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
