浮动引发的高度塌陷问题

高度塌陷问题的产生

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

<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. Kwp2000协议的应用（程序后续篇）

    作者:良知犹存 转载授权以及围观:欢迎添加微信:becom_me 总述 接上篇文章,本篇继续对基于PID解析数据,如何依据J1979的标准进行解析数据 先给昨天的文章补上一张故障码对照表,昨天分析了如 ...

  2. HDU 6264 （深搜，数论）

    题目链接 题意 求\(\sum_{d|n}\phi (d) \times {n\over d}\),其中\(\phi(n) = n\prod_{p|n}({1-{1\over p}})\) 分析 将\ ...

  3. Codeforces Round #681 (Div. 2, based on VK Cup 2019-2020 - Final)【ABCDF】

    比赛链接:https://codeforces.com/contest/1443 A. Kids Seating 题意 构造一个大小为 \(n\) 的数组使得任意两个数既不互质也不相互整除,要求所有数 ...

  4. [USACO12FEB]Symmetry

    传送门: https://www.luogu.com.cn/problem/P3046 https://ac.nowcoder.com/acm/contest/6306/G 题意 给定n个不同的点,求 ...

  5. poj2778 DNA Sequence(AC自动机+矩阵快速幂）

    Description It's well known that DNA Sequence is a sequence only contains A, C, T and G, and it's ve ...

  6. python爬取网易翻译 和MD5加密

    一.程序需要知识 1.python中随机数的生成 # 生成 0 ~ 9 之间的随机数 # 导入 random(随机数) 模块 import random print(random.randint(0, ...

  7. hdu5564 Clarke and digits

    Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission ...

  8. Java——方法及构造方法、intellij IDEA中的一些快捷键

    intellij IDEA中的一些快捷键: 一.方法基础 给你一个两个int类型的数相加的例子: 这个例子说明了 public static void main(String[] args) {}相当 ...

  9. Codeforces Round #635 C. Linova and Kingdom

    传送门:C. Linova and Kingdom 题意:给你一棵树,要求对k个结点涂色,然后统计每个未涂色结点到根结点的路径上未涂色结点的和,求和最大能为多少 题解:对着样例画几遍,然后贪心发现,最 ...

  10. 02、scrapy安装

    1.安装scrapy 采用pip的安装方式,从豆瓣源获取 pip install -i https://pypi.douban.com/simple/ scrapy 安装过程中会报出错误: build ...