浮动引发的高度塌陷问题

高度塌陷问题的产生

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

<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. Qt update刷新之源码分析(一)

    在做GUI开发时,要让控件刷新,会调用update函数:那么在调用了update函数后,Qt究竟基于什么原理.执行了什么代码使得屏幕上有变化?本文就带大家来探究探究其内部源码. Qt手册中关于QWid ...

  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. 2019牛客多校 Round9

    Solved:3 Rank:181 H Cutting Bamboos 这个东西好像叫整体二分 #include <bits/stdc++.h> using namespace std; ...

  4. Uva 10815 Andy's First Dictionary（字符串）

    题目链接:https://vjudge.net/problem/UVA-10815 题意 找出一段文本中的所有单词,以小写形式按照字典序输出. 思路 用空白符替换文本中所有非字母字符后再次读入. 代码 ...

  5. QQ空间自动点赞js代码

    1.jQuery().each(): each() 方法为每个匹配元素规定要运行的函数. 提示:返回 false 可用于及早停止循环. 函数原型: function(index,element) 为每 ...

  6. 安装jdk并配置环境变量

    安装jdk并配置环境变量 安装jdk 点击访问官网 https://www.oracle.com/downloads/或直接下载 https://www.jdkdownload.com/ 推荐使用后面 ...

  7. Nginx基础 - Nginx+Lua实现灰度发布与WAF

    1.Nginx加载Lua环境默认情况下Nginx不支持Lua模块, 需要安装LuaJIT解释器, 并且需要重新编译Nginx, 建议使用openrestry 1)环境准备 [root@localhos ...

  8. 牛客网多校第5场 I vcd 【树状数组+离散化处理】【非原创】

    题目:戳这里 学习博客:戳这里 作者:阿狸是狐狸啦 n个点,一个点集S是好的,当且仅当对于他的每个子集T,存在一个右边无限延长的矩形,使的这个矩形包含了T,但是和S-T没有交集. 求有多少个这种集合. ...

  9. 进程控制——fork-and-exec、system、wait

    forc-and-exec流程 父进程与子进程之间的关系十分复杂,最大的复杂点在于进程间相互调用.Linux下这一流程称为fork-and-exec.父进程通过fork的方式产生一个一模一样的子进程, ...

  10. mysql(五)--性能优化总结

    1 优化思路 作为架构师或者开发人员,说到数据库性能优化,你的思路是什么样的? 或者具体一点,如果在面试的时候遇到这个问题:你会从哪些维度来优化数据库, 你会怎么回答? 我们在第一节课开始的时候讲了, ...