高度塌陷问题:
在浮动布局中,父元素的高度默认是被子元素撑开的,当子元素浮动后它就会完全脱离文档流,这样就无法撑起父元素的高度,导致父元素高度丢失。
父元素高度丢失后就会使得下面的元素向上移动,破坏原本的布局,使得页面混乱。所以高度塌陷是浮动页面中经常出现的问题。
如何解决高度塌陷?
一般采用BFC( Block Formatting Context)块级格式化环境来解决
1)BFC是CSS中的一个隐含的属性,可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域
2)元素开启BFC后的特点(只要开启的BFC就会有这些特点):
1、开启BFC的元素不会被浮动元素所覆盖
2、开启BFC的子元素和父元素外边距不会重叠
3、开启BFC的元素可以包含浮动的子元素
3)可以通过一些特殊的方式来开启元素的BFC
1、设置元素的浮动(不推荐)
2、将元素设置为行内块元素(不推荐)
3、将元素的overflow设置为一个非visible的值
-常用方式:为元素设置overflow: hidden开启其BFC
-----------这些方式都会有一些“ 副作用 ”, 我们要选择副作用最小的,还能解决高度塌陷问题,再下一篇文章中将会提及clear属性、after伪类等,为解决高度塌陷提供新思路。
其他方式:
代码如下:
<style>
.box1{
/* float: left; */
width: 200px;
height: 200px;
/* 父元素的外边距继承给了子元素,子元素和父元素的外边距重叠,所以在给子元素设置外边距时,父元素和子元素一起下移动 */
background-color: #bfc;
/* 给父元素开启BFC,使得外边距不重叠,这时给子元素设置外边距只有子元素下移 */
overflow: hidden;
}
.box3{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 30px;
}
.box2{
width: 200px;
height: 200px;
background-color: burlywood;
/* 开启box2的BFC */
/* overflow: hidden; */
}
</style>
</head>
<body>
<div class="box1">
<div class="box3">
</div>
</div>
<div class="box2">
</div>