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绘制出各种几何图形
Aug 17 HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 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
php中的MVC模式运用技巧
2007/05/03 PHP
php实现telnet功能示例
2014/04/08 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
JS监听组合按键思路及实现过程
2020/04/17 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
linux下进程间通信的方式
2014/12/23 面试题
写求职信有什么意义
2014/02/17 职场文书
捐款倡议书
2014/04/14 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
领导干部作风建设总结
2014/10/23 职场文书
2014年医务科工作总结
2014/12/18 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js