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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
AmazeUI中模态框的实现
Aug 19 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小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
在Django的视图中使用form对象的方法
2015/07/18 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
python八大排序算法速度实例对比
2017/12/06 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
合作意向书
2014/07/30 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
幼儿园辞职书
2015/02/26 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
车辆挂靠协议书
2016/03/23 职场文书
python实现A*寻路算法
2021/06/13 Python