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属性汇总
Jul 21 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
微信小程序 上传头像的实例详解
2017/10/27 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python创建系统目录的方法
2015/03/11 Python
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
python装饰器常见使用方法分析
2019/06/26 Python
python中append实例用法总结
2019/07/30 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
《雨点》教学反思
2014/02/12 职场文书
房产授权委托书范本
2014/09/22 职场文书
个人四风对照检查材料
2014/09/26 职场文书
学生实习证明范文
2014/09/28 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
小平您好观后感
2015/06/09 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书