浮动引发的高度塌陷问题

高度塌陷问题的产生

当原本处于父容器中的元素脱离文档流后,父容器发生高度丢失的问题

<style>

	.outer{

		border: 5px red solid;

	} 

	.inner{

		width: 100px;

		height: 100px;

		background-color: orange;

		/* 由于子元素设置浮动脱离文档流,使得在文档流中的父元素高度丢失 */

		float: left;

	}

</style>

<div class="outer">

    <div class="inner"></div>

</div>

BFC(Block Formatting Context)的引入

BFC又称块级格式化上下文环境,开启BFC的元素会变成一个独立的布局区域

元素开启BFC后的特点

开启BFC的元素不会被其他浮动元素所覆盖

<style>

div{

    width: 100px;

    height: 100px;

}

.box1{

    background-color: chartreuse;

    /* 开启浮动脱离文档流后,box2按正常情况应该会在box1原来的位置(被box1覆盖住) */

    float: left;

}

.box2{

    background-color: crimson;

    /* 但是box2开启BFC后就能做到不被box1覆盖 */

    /* 由于box1不会再独占一行(高度与宽度由内容撑开),所以box2会排列在box1右侧 */

    overflow: hidden;

}

</style>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

</body>

开启BFC的元素不会发生父子元素外边距重叠

<style>

    .father{

        width: 200px;

        height: 200px;

        background-color: crimson;

        /* 为父元素开启BFC,解决外边距重叠问题 */

        overflow: hidden;

    }

    .son{

        width: 100px;

        height: 100px;

        background-color: #bfa;

        /* 发生外边距重叠 */

        margin-top: 80px;

    }

</style>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>

开启BFC后可以包含浮动的子元素

<style>

	.father{

	    border: 3px red solid;

	    /* 为父元素开启BFC,使得其能够包裹住浮动元素 */

	    overflow: hidden;

	}

	.son{

	    width: 100px;

	    height: 100px;

	    background-color: #bfa;

	    /* 设置浮动触发高度塌陷 */

	    float: left;

	}

</style>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>

如何开启BFC

设置元素浮动

float: left

float: right

将元素display属性设置为inline-block、table等

display: inline-block

display: table

overflow属性设置为非visible值

overflow: hidden;   <!-- 常用方式 -->

overflow: auto;

overflow: scroll;

开启定位

position: absolute;

position: fixed;

高度塌陷解决方法1: 父元素高度写死

<style>

	.outer{

  		border: 5px red solid;

		/* 将父元素高度写死 */

		height: 100px

	} 

	.inner{

		width: 100px;

		height: 100px;

		background-color: orange;

		/* 由于子元素设置浮动脱离文档流,使得在文档流中的父元素高度丢失 */

		float: left;

	}

</style>

<div class="outer">

    <div class="inner"></div>

</div>

缺点: 无法依据子元素的大小进行灵活改变

高度塌陷解决方法2: 为父元素也设置浮动

子元素是因为浮动(开启BFC)导致脱离文档流,所以为父元素同样设置浮动(开启BFC)就能解决

<style>

    .father{

        border: 3px red solid;

        /* 为父元素开启BFC,使得其能够包裹住浮动元素 */

        float: left;

    }

    .son{

        width: 100px;

        height: 100px;

        background-color: #bfa;

        /* 设置浮动触发高度塌陷 */

        float: left;

    }

</style>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>

缺点: 影响其他还在文档流中元素的布局,父元素的宽度由子元素撑开

高度塌陷解决方法3: 使用clear属性清除浮动对元素的影响

<style>

    .father{

        border: 3px red solid;

    }

    .clear{

        /* clear属性的原理: 浏览器自动计算浮动元素对当前元素的影响范围

        然后通过自动计算设置margin来解除影响 */

        clear: both;

    }

    .son{

        width: 100px;

        height: 100px;

        background-color: #bfa;

        /* 设置浮动触发高度塌陷 */

        float: left;

    }

</style>

<body>

    <div class="father">

        <div class="son"></div>

        <!-- 增加一个看不见的子元素,通过clear的原理来摆脱son脱离文档流对father的影响(高度塌陷) -->

        <!-- 原理:  .clear如果没收到浮动影响会处于.son的下面,刚好能撑开父元素 -->

        <div class="clear"></div>

    </div>

</body>

缺点: 增加了html结构

高度塌陷解决方法4(最终推荐): ::after伪元素结合clear属性

使用::after伪元素有效解决了使用clear属性导致html结构增加的缺点

注意: ::after伪元素用于为已选中元素的最后添加虚拟子元素,这个处于最后的虚拟子元素默认是行内元素

<style>

    .father{

        border: 3px red solid;

    }

    .son{

        width: 100px;

        height: 100px;

        background-color: #bfa;

        /* 设置浮动触发高度塌陷 */

        float: left;

    }

    /* 使用伪元素有效解决了使用clear属性导致html结构增加的缺点 */

    .father::after{

        content: '';

        clear: both;

        /* 此时还不够: 因为::after元素是行内元素 */

        display: table; /* 需要转换成为块元素 */

        /* 虽然在这没用,但是需要知道display同时也开始了BFC属性 */

    }

</style>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>

clearfix类封装解决高度塌陷与外边距重叠

/* 解决外边距重叠 */

.clearfix::before{

    /* 由于必须使用margin属性,所以解决思路是破坏两个margin相邻的状态,而不是转向使用padding */

    content: '';

    /* 使用table的好处:

            -   既能将虚拟元素变成块元素

            -   同时在内容为空时,不占据空间(block会占据)

    */

    display: table;

}

/* 解决高度塌陷 */

.clearfix::after{

    content: '';    /* 在父元素最末添加虚拟子元素 */

    clear: both;    /* 清除这个子元素收到的浮动影响 */

    display: table; /* 既让这个虚拟子元素变成块元素(默认是行内元素),又让其在没有内容的情况下不占据空间 */

}

/* clear: both 只作用于浮动元素影响的元素,而clearfix是放在虚拟元素中的,所以可以放心合并 */

.clearfix::before,

.clearfix::after{

    content: '';    /* 在父元素最末添加虚拟子元素 */

    clear: both;    /* 清除这个子元素受到的浮动影响 */

    display: table; /* 既让这个虚拟子元素变成块元素(默认是行内元素),又让其在没有内容的情况下不占据空间 */

}

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

  1. li浮动引起ul高度坍陷的解决方法

    我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就 ...

  2. float过后 高度无法自适应的解决方法

    float过后 高度无法自适应的解决方法: 在float层最外面包一层div即可.

  3. CSS浮动布局带来的高度塌陷以及其解决办法

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  4. css浮动导致的高度塌陷问题及清楚浮动的方法

    浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...

  5. CSS高度塌陷问题与解决办法

    问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应 ...

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

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

  7. HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  8. CSS设置浮动导致背景颜色设置无效的解决方法

    float浮动会使父元素高度塌陷,父级元素不能被撑开,所以导致背景颜色不能被撑开 解决方法: 对父元素设置高度 对父元素设置 overflow:hidden清除浮动 把父元素也设置为float浮动 结 ...

  9. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

随机推荐

  1. docker部署 springboot 多模块项目+vue

    之前学习了docker,今天就来试试将这个项目打包成docker镜像并通过运行一个镜像来运行项目.这里使用的项目是el-admin.是一个开源的springboot后端管理框架(前端vue),有兴趣的 ...

  2. The Department of Redundancy Department

    Write a program that will remove all duplicates from a sequence of integers and print the list of un ...

  3. Educational Codeforces Round 89 (Rated for Div. 2)D. Two Divisors 线性筛质因子

    题目链接:D:Two Divisors 题意: 给你n个数,对于每一个数vi,你需要找出来它的两个因子d1,d2.这两个因子要保证gcd(d1+d2,vi)==1.输出的时候输出两行,第一行输出每一个 ...

  4. Vitya and Strange Lesson CodeForces - 842D 字典树+交换节点

    题意: Today at the lesson Vitya learned a very interesting function - mex. Mex of a sequence of number ...

  5. Redis 事务 & 消息队列

    Redis 消息队列介绍 什么是消息队列 消息队列(Message Queue)是一种应用间的通信方式,消息发送后可以立即返回,有消息系统来确保信息的可靠传递,消息生产者只管把消息发布到消息队列中而不 ...

  6. Python 是什么语言

    Python 是 解释型语言,强类型定义语言,动态类型定义语言 编译型语言 & 解释型语言 编译型语言:代码在执行前,需要编译(成机器语言文件,如 .exe 文件):以后再运行时,直接使用编译 ...

  7. Gym 101464C - 计算几何+二分（uva1463）

    不是很难,但是我觉得对代码能力的要求还是挺高的. 注意模块化. 因为是浮点数,所以二分用的很多很多. 参考 https://blog.csdn.net/njupt_lyy/article/detail ...

  8. IP的地址的划分

    IP地址的划分是计算机网络中很重要的一个知识点,曾经考过三级,但是长时间不用就会忘掉,现在重新将IP的地址划分整理一遍. 首先IP地址的编址方法经历了三个阶段:分类的IP地址.子网的划分.构成超网 我 ...

  9. const，volatile，static，typdef，几个关键字辨析和理解

    1.const类型修饰符 const它限定一个变量初始化后就不允许被改变的修饰符.使用const在一定程度上可以提高程序的安全性和可靠性.它即有预编译命令的优点也有预编译没有的优点.const修饰的变 ...

  10. 如何给 GitHub 添加 SSH key， 如何生成 SSH key 详细图文教程！

    如何给 GitHub 添加  SSH key, 如何生成  SSH key 详细图文教程! 一. 生成  SSH key https://ide.c9.io/xgqfrms/ 创建一个空项目:(或使用 ...