第一种方式：开启BFC属性
<!doctype html>
<html>
<head>
<title></title>
<mata charset="utf-8"/>
<style type="text/css">
.box1{
border:10px red solid;
/*
根据W3C的标准，在页面中的一个隐含的属性叫做Block Formatting Context
简称BFC,该属性可以设置打开或者关闭，默认关闭的。
当开启元素的BFC以后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
推荐开启方式：将overflow设置为hidden
可以保证父元素的宽度不丢失，同时不会导致下边的元素上移
*/
overflow:hidden;
/*兼容IE6及其以下版本*/
zoom:1;
}
.box2{
width:100px;
height:100px;
background-color:blue;
/*设置向左浮动*/
float:left;
}
.box3{
height:200px;
background-color:yellow
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div
最低0.47元/天 解锁文章
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
