高度塌陷的产生条件

  • 子元素浮动,脱离文档流
  • 子元素绝对定位或固定定位,脱离文档流

定位产生的高度塌陷只能通过加固定高度或更换其他方案解决塌陷,本文主要讨论浮动产生塌陷的解决方法。

高度塌陷的解决方法

1、直接给父元素加高度

    div{
border: 5px solid black;
height: 200px;
}
p{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}

优点:代码简单,容易理解

缺点:自适应性不强

建议:不建议使用

2、利用clear:both;声明

2-1 在所有子元素的最后添加块元素,声明clear:both;

	div{
border: 5px solid black;
}
p{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
span{
display: block;
border: 5px solid red;
clear: both;
}
<div>父元素div
<p>子元素p</p>
<span></span>
</div>

原理:clear:both清除span两边的浮动,让父级div能自动获取到高度

优点:简单,代码少,所有主流浏览器都支持clear属性

缺点:不易理解,添加空白元素造成代码冗余

建议:不建议使用

2-2 万能清除法

        .clearall {
/* 可以解决IE6、IE7、IE8浏览器兼容问题 */
zoom: 1;
} .clearall::after {
/* 3个核心声明 起到方法2-1相似作用*/
content: "";
display: block;
clear: both;
/* 3个附属声明 解决一部分浏览器兼容问题 */
height: 0;
overflow: hidden;
visibility: hidden;
}
<div class="clearall">父元素div
<p>子元素p</p>
</div>

原理:给父元素设置clearall类,赋予其一个::after伪元素,该元素达到与方法2-1类似的效果

优点:可以作为公共类,方便使用,兼容性好

缺点:代码多,不易初学者理解

建议:建议使用,建议定义公共类,以减少CSS代码

3、利用BFC特性

  • BFC(Block formatting context)直译为块级格式化上下文,他有这样一个特性:

    计算BFC的高度时,浮动元素也参与计算

    将父元素触发为BFC即可解决浮动造成的高度塌陷

  • 元素触发BFC的条件

    1. html标签为BFC
    2. float属性值不为none
    3. overflow属性值不为visible
    4. display属性值为inline-block、table-cell、table-caption、flex、inline-flex其中之一
    5. position属性值为absolute或fixed

3-1 给父元素也添加浮动声明

        div {
border: 5px solid black;
float: left;
} p {
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}

父元素成为浮动元素,脱离文档流:

3-2 更改父元素的overflow属性为hidden/auto/scroll

overflow: hidden;

 超出内容会被隐藏:

overflow:auto;

元素内容超出容器会出现滚动条:

overflow:scroll;

父元素出现滚动条:

3-3 更改父元素的display属性触发BFC

display: inline-block;
display: table-cell;

display: table-caption;

display: flex;

display: inline-flex;

3-4 更改父元素的position属性为absolute或fixed

position: absolute;
position: fixed;

父元素会脱离文档流。

总结

由以上可知,解决高度塌陷的方法有很多,选择适合当前布局效果的方法才是最重要的。

一般无特殊情况,推荐选择使用兼容性好用起来方便的万能清除法

高度塌陷与BFC的更多相关文章

  1. 整理高度塌陷与BFC

    当面试官问道你高度塌陷时,人们第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: h ...

  2. 高度塌陷与 BFC

    1. 高度塌陷 在浮动布局中,父元素的高度默认是被子元素撑开的  当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失  父元素高度丢失以后,其下的元 ...

  3. 加overflow-hidden就可以解决高度塌陷问题,overflow-触发BFC

    1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position ...

  4. 浅谈BFC与高度塌陷

    这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...

  5. 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

    浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

  6. __x__(29)0908第五天__高度塌陷 问题

    高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...

  7. css关于浮动的高度塌陷

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. css之高度塌陷及其解决方法

    浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ...

  9. CSS高度塌陷问题解决方案

    高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

随机推荐

  1. Shader专题:卡通着色(一)控制颜色的艺术

    什么是 Shader? 关于什么是 Shader ,各种百科各种教程都有说过,但是今天我们就从一个另一个角度去试着理解什么是 Shader? 我们先看下 Shade 的英文意思,如下: v.给...遮 ...

  2. 用JS实现改变文本框的只读属性

    <input id="aaa" readonly><input id="bbb" readonly> <script>doc ...

  3. application.yml和application.properties文件的区别

    maven项目 .yml文件时树状结构,层级浅时比较方便,层级深的时候就比较麻烦了 .properties文件时属性访问结构,层级深浅对它来说是一样的,而且相较于.yml类型的文件比较好配置,但缺点也 ...

  4. JVM源码分析之Java对象头实现

    原创申明:本文由公众号[猿灯塔]原创,转载请说明出处标注 “365篇原创计划”第十一篇. 今天呢!灯塔君跟大家讲: JVM源码分析之Java对象头实现 HotSpot虚拟机中,对象在内存中的布局分为三 ...

  5. 主流App自动化测试框架对比

        1.主流App自动化测试框架对比 2.Appium自动化测试框架 官方网址:http://appium.io/ 跨架构:支持原生.混合以及web移动应用 跨平台:Android & I ...

  6. SQL基础随记3 范式 键

    SQL基础随记3 范式 键 什么是范式?哈,自己设计会使用但是一问还真说不上来.遂将不太明晰的概念整体下   什么是 & 分类 范式(NF),一种规范,设计数据库模型时对关系内部各个属性之间的 ...

  7. Linux终端音乐播放器cmus攻略: 操作歌单

    目录 1. 安装 2. 操作说明 2.1. *PlayList歌单 2.2. 其他 3. 视图切换 4. 使响应Media/play按键 4.1. 编译安装 cmus是一款开源的终端音乐播放器.它小巧 ...

  8. Django---进阶14

    目录 登陆功能 首页搭建 admin后台管理 用户头像展示 图片防盗链 个人站点 侧边栏筛选功能 登陆功能 def login(request): if request.method == 'POST ...

  9. mysqladmin 的用法及所带参数

  10. 技术干货丨通过wrap malloc定位C/C++的内存泄漏问题

    摘要:用C/C++开发的程序执行效率很高,但却经常受到内存泄漏的困扰.本文提供一种通过wrap malloc查找memory leak的思路. 用C/C++开发的程序执行效率很高,但却经常受到内存泄漏 ...