高度塌陷问题：
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素有多高，父元素就有多高。但是子元素设置浮动以后，子元素会脱离文档流，此时会导致子元素的无法撑起父元素的高度，导致父元素高度塌陷。父元素的高度塌陷，则父元素下面的元素都会往上移动，导致页面布局混乱。
解决方法一：
根据W3C标准在页面中元素都会有一个隐含的属性叫做 Block Formatting Context 简称BFC，该属性可以设置开启或者关闭，默认是关闭的。
开启元素的BFC，元素会有以下特征：
- 父元素的垂直外边距不会与子元素重叠
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素可以包含浮动的子元素
那么，如何开启元素的BFC呢？
1、设置元素浮动
----使用此方法，虽然会撑开父元素，但是会导致父元素宽度丢失，而且这种方式会导致下边的元素上移，不能解决问题
2、设置元素的绝对定位
3、设置元素为 inline-block
----可以解决问题，但是会导致宽度丢失
4、（推荐方式）将元素的overflow设置为一个非visible的值（将overflow的值设置为hidden是副作用最小的开启BFC）
overflow : hidden;
但是，在IE6及其以下没有BFC，但是有一个隐含的属于Layout，可以直接将zoom的值设置为1
zoom: 1; (zoom 表示放大的意思，后面的数值表示放大几倍）
-
overflow:hidden;
-
zoom:1;
解决方法二：
可以直接在高度塌陷的父元素的最好添加一个空白的div，由于这个div没有浮动，他说可以撑起来父元素的高度
然后对其进行清除浮动。这样通过这个空白的div撑起父元素的高度，基本没有副作用
缺点：
使用这种方式虽然解决了塌陷问题，但是给页面中添加了多余的结构，但是也是可以进行使用的
-
<!DOCTYPE html>
-
<html>
-
<head lang="en">
-
<meta charset="UTF-8">
-
<title>
</title>
-
</head>
-
<style>
-
.t1{
-
border:
1px solid red;
-
}
-
.t2{
-
width:
200px;
-
height:
200px;
-
background-color: yellow;
-
float: left;
-
}
-
-
/*
-
解决塌陷方案二：
-
可以直接在高度塌陷的父元素的最好添加一个空白的div，由于这个div没有浮动，他说可以撑起来父元素的高度
-
然后对其进行清除浮动。这样通过这个空白的div撑起父元素的高度
-
基本没有副作用
-
-
缺点：
-
使用这种方式虽然解决了塌陷问题，但是给页面中添加了多余的结构，但是也是可以进行使用的；
-
-
*/
-
.clear{
-
clear: both;
-
}
-
-
</style>
-
<body>
-
-
<div class="t1">
-
<div class="t2">
</div>
-
<div class="clear">
</div>
-
</div>
-
-
</body>
-
</html>
解决方法三:
对于方法二的优化
-
<!DOCTYPE html>
-
<html>
-
<head lang="en">
-
<meta charset="UTF-8">
-
<title>
</title>
-
</head>
-
<style>
-
.t1{
-
border:
1px solid red;
-
}
-
.t2{
-
width:
200px;
-
height:
200px;
-
background-color: yellow;
-
float: left;
-
}
-
/*
-
解决方法三：通过after伪类给元素最后面加一个空白的元素，然后对其清除浮动.
-
*/
-
-
.clearfix
:after{
-
/*添加一个内容*/
-
content:
'';
-
/*转换为一个块元素*/
-
display:block;
-
/*清除俩侧的浮动*/
-
clear:both;
-
}
-
/*在IE6中不支持after伪类 所以还是得需要Layout*/
-
.clearfix{
-
zoom:
1;
-
}
-
-
</style>
-
<body>
-
-
<div class="t1 clearfix">
-
<div class="t2">
</div>
-
</div>
-
-
</body>
-
</html>
转载：https://blog.csdn.net/qq_41965731/article/details/106535274
查看评论