CSS浮动引起的高度塌陷问题


Posted in HTML / CSS onAugust 05, 2022

正常页面布局

<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>

CSS浮动引起的高度塌陷问题

当给类名为.box的盒子加上浮动后

<style>
        *{
            margin:0;
            padding: 0;
        }
        .content{
            width:400px;
            border:1px solid #000;
            
        }
        .box{
            width:200px;
            height:200px;
            background: greenyellow;
            float: left;
            
        }
    </style>

CSS浮动引起的高度塌陷问题

可以看到页面布局已经乱了,因为元素设置浮动后会脱离文档流

解决方案

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浮动高度塌陷内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 #HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 #HTML / CSS
纯CSS打字动画的实现示例
Aug 05 #HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
前端使用svg图片改色实现示例
Jul 23 #HTML / CSS
详解flex:1什么意思
Jul 23 #HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 #HTML / CSS
You might like
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
php 常用的系统函数
2017/02/07 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python算法题 链表反转详解
2019/07/02 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
人力资源专业推荐信
2013/11/29 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
学生鉴定评语大全
2014/05/05 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
经销商年会策划方案
2014/05/29 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
运动会广播稿200字
2014/10/18 职场文书
2014司机年终工作总结
2014/12/05 职场文书
商务考察邀请函模板
2015/02/02 职场文书
三下乡个人总结
2015/03/04 职场文书
2015年信访工作总结
2015/04/07 职场文书
道歉情书大全
2015/05/12 职场文书
教师培训简讯
2015/07/20 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript