admin 管理员组

文章数量: 888299

解决高度塌陷的几种方法

引入

进行页面布局时，为了能够达到自适应，通常高度是不会进行固定设置的，而使用float进行元素的浮动后，由于没有内容的高度，所以会发生父元素的高度塌陷问题，为了解决此类问题这里给出了几种解决方法。

一、开启BFC（块级格式化环境）

开启BFC后的元素特点：

1.开启BFC的元素不会再被浮动元素所覆盖

不会发生覆盖图

2.开启BFC的子元素和父元素外边距不再重叠（即不会发生外边距的折叠）

父元素和子元素外边距不再重叠图

3.开启BFC的元素可以获取到子元素的高度

父元素获取到子元素高度图

通常使用的开启方法：

1.将元素设置为浮动元素（不推荐）

2.将元素设置为行级块元素display:inline-block（不推荐）

3.将元素的overflow设置为非visible的值，通常选择设为hidden

更多开启方式可以查看CSS参考文档

二、使用after伪元素结合clear属性解决高度塌陷

clear属性介绍：清除浮动元素对当前元素的影响

可选值：left,清除左侧浮动元素的影响

               right,清除右侧浮动元素影响

               both,清除左右两侧浮动元素中较大的浮动元素的影响

实现原理：浏览器会获取设置了clear属性的元素之前的浮动元素的高度，然后给设置了clear属性的元素的margin加上这个高度

after伪元素实现高度塌陷方法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>after解决高度塌陷问题</title><style>.div1{border:10px solid red;}.div2{width:100px;height:100px;background-color:green;float:left;}.div1::after{content:"";/*在浮动元素的父元素内容区最后加上内容*/display:block;/*默认情况下after所添加的内容为行内元素*/clear:both;/*清除浮动元素影响*/}</style>
</head>
<body><div class="div1"><div class="div2"></div></div>
</body>
</html>

实现图：

三、使用clearfix通用方法解决高度塌陷问题（同时解决外边距折叠问题）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>clearfix</title><style>.box1{width:200px;height:200px;background-color: red;}.box2{width:100px;height:100px;background-color:#bfa;margin-top:20px;}/* clearfix可以同时解决高度塌陷问题和外边距重叠问题，当遇到此类问题时，直接使用clearfix这个类即可 */.clearfix::before,.clearfix::after{content:"";display:table;clear:both;}</style>
</head>
<body><div class="box1 clearfix"><div class="box2"></div></div>
</body>
</html>

实现图：

 

 

本文标签： 解决高度塌陷的几种方法

版权声明：本文标题：解决高度塌陷的几种方法 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1688272870h200016.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。