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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 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
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
python的多重继承的理解
2017/08/06 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Tensorflow累加的实现案例
2020/02/05 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
某公司面试题
2012/03/05 面试题
主管职责范文
2013/11/09 职场文书
公司晚会主持词
2014/03/22 职场文书
文明好少年事迹材料
2014/08/19 职场文书
商品陈列协议书
2014/09/29 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
教师听课评语大全
2014/12/31 职场文书
杭白菊导游词
2015/02/10 职场文书
辩论会主持词
2015/07/03 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
HTML+JS实现在线朗读器
2022/02/15 Javascript
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android