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教程(1):什么是CSS3
Apr 02 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
php字符集转换
2017/01/23 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
Javascript的闭包
2009/12/31 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
OpenCV实现人脸识别
2017/04/07 Python
python socket 聊天室实例代码详解
2019/11/14 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
网络教育毕业生自我鉴定
2013/10/10 职场文书
书法大赛策划方案
2014/06/04 职场文书
秋菊打官司观后感
2015/06/03 职场文书
学校教学管理制度
2015/08/06 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏