解决高度塌陷四种方式
/*高度塌陷问题1*/
.box1{ /*为父元素 box1 设置一个边框*/
border: 10px red solid;
overflow: hidden;
/*IE6 以下 并不支持BFC
* 但IE6 具有另一个隐含属性 叫做 hasLayout
* 该属性的作用和BFC类似
* 直接将元素的zoom 设置为1 就可以开启
* zoom 表示放大的意思 后面一个数值,写几就是放大几倍
* zoom只在IE中支持
*/
}
.box2{ /*子元素box2*/
width: 100px;
height: 100px;
background: blue;
/* 在文档流中,父元素的高度默认是被子元素撑开的
* 也就是子元素多高,父元素就多高
* 但是 当为元素设置浮动以后,子元素会完全脱离文档流
* 此时 将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷
* 由于父元素的高度塌陷,则父元素下所有的元素都会向上移动,这样会导致布局混乱
*
* 所以在开发中,一定要避免高度塌陷
* 我们可以将父元素高度写死,以避免高度塌陷的问题出现
* 但是一旦高度塌陷写死,父元素的高度将不能自动适应子元素的高度,所以这种方案不推荐
*/
/*为子元素设置向左浮动*/
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
/* 根据W3C的标准,在页面中元素都有一个隐含的属性叫做Block Formatting Context
* 简称BFC,该属性可以设置打开或者关闭,默认时关闭的
* 当开启元素的BFC以后,元素将会具有如下特性:
* 1.父元素的垂直外边距不会和子元素重叠
* 2.开启BFC的元素不会被浮动元素所覆盖
* 3.开启BFC的元素可以包含浮动的子元素
*
* 如何开启元素的BFC
* 1.设置元素浮动
* - 使用这种方式开启,虽然可以撑开父元素,但是会导致父元素宽度丢失
* 而且这种方式也会导致下面的元素上移,不能解决问题
* 2.设置元素绝对定位
* 3.设置元素为inline-block
* - 可以解决问题,但是会导致宽度丢失,不推荐使用这种方式
* 4.将元素的overflow 设置为一个非visible的值
*
* 推荐方式:将overflow 设置为hidden时副作用最小的开启BFC的方式
*/
/*清除浮动*/
.box4{
width: 100px;
height: 100px;
background-color: burlywood;
/* 设置 box4 向左浮动*/
float: left;
}
.box5{
width: 200px;
height: 200px;
background-color: yellowgreen;
/* 由于受到box4的浮动影响,box5整体向上移动了100px
* 我们有时希望清除掉其他元素浮动对当前元素产生的影响,这时可以使用clear清除浮动
* clear 可以用来清除其他浮动元素对当前元素产生的影响
* 可选值:
* none:不清除浮动
* left: 清除左侧浮动影响
* right: 清除右侧浮动影响
* both: 清除两侧浮动影响
* - 清除对他影响最大的那个浮动
*
* 清除box4浮动对box5产生的影响
* 清除浮动以后,元素会回到其他元素浮动之前的位置
*/
clear: left;
float: right;
}
.box6{
width: 300px;
height: 300px;
background-color: skyblue;
clear: both;
}
/*高度塌陷问题2*/
/* 解决高度塌陷方案二
* 由于这个div没有浮动,所以他是可以撑开都元素高度的
* 然后再对其进行清除浮动,这样可以通过这个空白的div来撑开父元素高度
* 基本没有副作用
*
* 使用这种方式虽然可以解决问题,但是会添加多余的结构
*/
.box7{
border: red 1px solid;
}
.box8{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box9{
clear: left;
}
/* 使用空的table 标签可以隔离父子元素的外边距，阻止外边距重叠
*/
/*高度塌陷问题3*/
.box10{
border: blueviolet 10px solid;
}
.box11{
width: 100px;
height: 100px;
background-color: black;
float: left;
}
/*通过after伪类,选中box1的后边
* 可以通过after 伪类向元素的最后添加一个空白的元素,然后对其清除浮动,
* 这样做 和添加一个div的原理一样,可以达到相同的效果,
* 而且不会在页面中添加多余的div,这是我们最推荐使用的方式,几乎没有副作用
*/
.clearfix:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧浮动*/
clear: both;
}
/*在IE6中不支持after伪类
* 所以在IE6中 还需要使用 hasLayout来处理
*/
.clearfix{
zoom = 1;
}
/*高度塌陷问题4*/
/* final vision
* clearfix是一个多功能的
* 既可以解决高度塌陷，又可以确保父元素 和 子元素的垂直外边距不会重叠
*
*/
.clearfix:before
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
下附HTML代码提供演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7">
<div class="box8"></div>
<div class="box9"></div>
</div>
<div class="box10 clearfix">
<div class="box11"></div>
</div>
</body>
<link rel="stylesheet" type="text/css" href="css/problem.css"/>
</html>
