CSS浮动引起的高度塌陷问题
发布时间：2022-07-27 16:05:43 作者：废物的自我修养记录 
我要评论
我要评论本文主要介绍了CSS浮动引起的高度塌陷问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
正常页面布局
<style>
*{
margin:0;
padding: 0;
}
.content{
width:400px;
border:1px solid #000;
}
.box{
width:200px;
height:200px;
background: greenyellow;
}
</style>
<body>
<div class="content">
<div class="box"></div>
</div>
<p>基苦阿斯蒂芬</p>
</body>
当给类名为.box的盒子加上浮动后
<style>
*{
margin:0;
padding: 0;
}
.content{
width:400px;
border:1px solid #000;
}
.box{
width:200px;
height:200px;
background: greenyellow;
float: left;
}
</style>
可以看到页面布局已经乱了，因为元素设置浮动后会脱离文档流
解决方案
1 利用BFC(给父元素加上overflow:hidden)
**缺点：父元素溢出的元素会隐藏，可能会影响页面显示 **
.content{
width:400px;
border:1px solid #000;
overflow: hidden;
}
2 加空div
要点：
1.加上一个空的块级元素
2.对块级元素进行清除浮动， 省事方法，不管理是左浮还是右浮，直接全清(clear:both)
<style>
*{
margin:0;
padding: 0;
}
.content{
width:400px;
border:1px solid #000;
/* overflow: hidden; */
}
.box{
width:200px;
height:200px;
background: greenyellow;
float: left;
}
.clear{
clear: both;
}
</style>
<body>
<div class="content">
<div class="box"></div>
<div class="clear"></div>
</div>
<p>基苦阿斯蒂芬</p>
</body>
3 利用伪元素
要点：
1 其实和加空div的原理是一致的，唯一要记住的就是把伪元素转为块级元素(display:block)，否则会没有效果
2 还有伪元素的属性不要忘记加上(content:‘’)
<style>
*{
margin:0;
padding: 0;
}
.content{
width:400px;
border:1px solid #000;
/* overflow: hidden; */
}
.content::after{
content: '';
display: block; // 必须要转换为块元素
clear: both;
}
.box{
width:200px;
height:200px;
background: greenyellow;
float: left;
}
/* .clear{
clear: both;
} */
</style>
<body>
<div class="content">
<div class="box"></div>
<!-- <div class="clear"></div> -->
</div>
<p>基苦阿斯蒂芬</p>
</body>
到此这篇关于CSS浮动引起的高度塌陷问题的文章就介绍到这了,更多相关CSS浮动高度塌陷内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
- 本文主要介绍了CSS中浮动float带来的高度塌陷问题及4种解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小2022-04-14
这篇文章主要介绍了css高度塌陷问题的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2020-03-24
这篇文章主要介绍了浅谈CSS 高度塌陷问题的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-25
最新评论