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 29 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
HTML常用标签超详细整理
Mar 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中使用XML
2006/10/09 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
浅析Javascript使用include/require
2013/11/13 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python实现购物程序思路及代码
2017/07/24 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
pandas DataFrame运算的实现
2020/06/14 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
Viking比利时:购买办公用品
2019/10/30 全球购物
文员自我评价怎么写
2013/09/19 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
爱我中华教学反思
2014/04/28 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers