浮动引发的高度塌陷问题

高度塌陷问题的产生

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

<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. spark sql优化

    1.内存优化 1.1.RDD RDD默认cache仅使用内存 可以看到使用默认cache时,四个分区只在内存中缓存了3个分区,4.4G的数据 使用kryo序列化+MEMORY_ONLY_SER 可以看 ...

  2. 【uva 1395】Slim Span（图论--最小生成树+结构体快速赋值 模版题）

    题意:给一个N(N<=100)个点的联通图(无自环和平行边),求苗条度(最大边-最小边的值)尽量小的生成树. 解法:枚举+Kruskal.先从小到大排序边,枚举选择的最小的边. 1 #inclu ...

  3. 1006 How many?

    Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 36   Accepted: 2 Description 有一天,小Q给了小J ...

  4. Caocao's Bridges HDU - 4738 找桥

    题意: 曹操在赤壁之战中被诸葛亮和周瑜打败.但他不会放弃.曹操的军队还是不擅长打水仗,所以他想出了另一个主意.他在长江上建造了许多岛屿,在这些岛屿的基础上,曹操的军队可以轻易地攻击周瑜的军队.曹操还修 ...

  5. Codeforces Round #641 (Div. 2) D. Orac and Medians (贪心)

    题意:有一个长度为\(n\)的数组,问能否通过多次使某个区间的所有元素变成这个区间的中位数,来使整个数组变成题目所给定的\(k\). 题解:首先这个\(k\)一定要在数组中存在,然后我们对中位数进行考 ...

  6. Codeforces Round #650 (Div. 3) E. Necklace Assembly (暴力)

    题意:有一个字符串,要求使用其中字符构造一个环(不必全部都用),定义一个环是k美的,如果它转\(k\)次仍是原样,现在给你\(k\),要求最长的k美环的长度. 题解:我们首先看\(k\),如果一个环转 ...

  7. MySQL中为避免索引失效所需注意的问题

    一.索引介绍 二.索引的优势与劣势 1.优势 类似于书籍的目录索引,提高数据检索的效率,降低数据库的IO成本. 通过索引列对数据进行排序,降低数据排序的成本,降低CPU的消耗. 2.劣势 实际上索引也 ...

  8. python 迭代器 iter多次消费

    问题 Python 中的迭代器是我们经常使用的迭代工具, 但其只能消费一次,再次消费便会出现 StopIteration 报错. 解决方案 封装了一个类,当迭代器使用完后再次初始化. 代码 class ...

  9. 国内centos/windows10安装minikube

    centos/windows10安装minikube 目录 centos/windows10安装minikube A win10安装minikube 1 下载安装kubectl.exe 1.1 准备目 ...

  10. 二进制安装kubernetes（一） 环境准备及etcd组件安装及etcd管理软件etcdkeeper安装

    实验环境: 架构图: 主机环境: 操作系统:因docker对内核需要,本次部署操作系统全部采用centos7.6(需要内核3.8以上) VM :2C 2G 50G * 5  PS:因后面实验需要向k8 ...