<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
border: 10px solid red;
/*
在页面中，元素都有一个隐含属性叫Block Formatting Contant
简称BFC，该属性可以设置打开或关闭，默认关闭
当开启元素的BFC以后，元素将会有如下特性
1 父元素的垂直外边距不会和子元素重叠
2 开启BFC的元素不会被浮动元素覆盖
3 开启BFC的父元素可以包含浮动的子元素
如何开启BFC
1 设置元素浮动
使用这种方式开启，可以撑开父元素，但会导致父元素宽度丢失
而且使用这种方式也会导致下方元素上移，不能解决问题
2 设置元素绝对定位
效果同浮动
3 设置元素为inline-block
可以解决塌陷问题，但会导致宽度丢失，不推荐使用
4 将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden（或auto）是副作用作用最小的开启BFC的方式
*/
overflow: auto;
/*
在IE6及以下的浏览器并不支持BFC，所以使用这种方式不能兼容IE6
IE6中具有另一个隐藏属性叫做hasLayout
该属性作用和BFC类似，通过hasLayout解决问题
直接将元素的zoom设置为1即可
*/
/*
zoom表放大含义，跟一个数值，元素放大几倍并且这个样式只在IE中支持
zoom：1；表示不放大元素，通过该方式开启hasLayout
*/
zoom: 1;
/*
为兼容所有浏览器，以上两种都写
*/
}
.box2{
width: 100px;
height: 100px;
background-color: #BBFFAA;
/*
文档流中，父元素的高度默认被子元素撑开
子元素多高，父元素多高
当为子元素设置浮动后，子元素完全脱离文档流
此时导致子元素无法撑起父元素的高度，导致父元素塌陷
由于父元素高度塌陷，则父元素下所有元素向上移动，导致页面布局混乱
重点： 解决高度塌陷问题
1 可以将父元素的高度写死，避免塌陷的问题出现，但一旦写死，父元素
高度将不能自动适应子元素的高度，这种方案并不推荐
2
*/
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
当开启元素的BFC以后，元素将会有如下特性
1 父元素的垂直外边距不会和子元素重叠
2 开启BFC的元素不会被浮动元素覆盖
3 开启BFC的父元素可以包含浮动的子元素
如何开启BFC
1 设置元素浮动
使用这种方式开启，可以撑开父元素，但会导致父元素宽度丢失
而且使用这种方式也会导致下方元素上移，不能解决问题
2 设置元素绝对定位
效果同浮动
3 设置元素为inline-block
可以解决塌陷问题，但会导致宽度丢失，不推荐使用
4 将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden（或auto）是副作用作用最小的开启BFC的方式
在IE6及以下的浏览器并不支持BFC，所以使用这种方式不能兼容IE6
IE6中具有另一个隐藏属性叫做hasLayout
该属性作用和BFC类似，通过hasLayout解决问题
直接将元素的zoom设置为1即可
zoom表放大含义，跟一个数值，元素放大几倍并且这个样式只在IE中支持
zoom：1；表示不放大元素，通过该方式开启hasLayout