浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)
- 浮动引发的高度塌陷问题
浮动引发的高度塌陷问题
高度塌陷问题的产生
当原本处于父容器中的元素脱离文档流后,父容器发生高度丢失的问题
<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相关概念及性质)的更多相关文章
- li浮动引起ul高度坍陷的解决方法
我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就 ...
- float过后 高度无法自适应的解决方法
float过后 高度无法自适应的解决方法: 在float层最外面包一层div即可.
- CSS浮动布局带来的高度塌陷以及其解决办法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- css浮动导致的高度塌陷问题及清楚浮动的方法
浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...
- CSS高度塌陷问题与解决办法
问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应 ...
- 加overflow-hidden就可以解决高度塌陷问题，overflow-触发BFC
1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position ...
- HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- CSS设置浮动导致背景颜色设置无效的解决方法
float浮动会使父元素高度塌陷,父级元素不能被撑开,所以导致背景颜色不能被撑开 解决方法: 对父元素设置高度 对父元素设置 overflow:hidden清除浮动 把父元素也设置为float浮动 结 ...
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！
谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
随机推荐
- POJ - 1743 Musical Theme （后缀数组）
题目链接:POJ - 1743 (不可重叠最长子串) 题意:有N(1<=N<=20000)个音符的序列来表示一首乐曲,每个音符都是1..88范围内的整数,现在要找一个重复的子串,它需要 ...
- P1073 最优贸易（最短路）
题目描述 CC C国有n n n个大城市和m mm 条道路,每条道路连接这 nnn个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 mmm 条道路中有一部分为单向通行的道路,一部分为 ...
- hdu1217 Arbitrage
Problem Description Arbitrage is the use of discrepancies in currency exchange rates to transform on ...
- UVA 10480 Sabotage (最大流) 最小割边
题目 题意: 编写一个程序,给定一个网络规范和破坏每个连接的成本,确定要切断哪个连接,以便将首都和最大的城市分离到尽可能低的成本. 分割-------------------------------- ...
- Codeforces Round #Pi (Div. 2) D. One-Dimensional Battle Ships
Alice and Bob love playing one-dimensional battle ships. They play on the field in the form of a lin ...
- hdu 5874
On an isolated island, lived some dwarves. A king (not a dwarf) ruled the island and the seas nearby ...
- vue 单文件组件最佳实践
vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...
- git 取消未成功的 merge
git 取消未成功的 merge # 合并时遇到冲突想取消操作,恢复index $ git merge --abort # 可以回退到某个提交 $ git reset --hard # 可以撤销某个提 ...
- 吐槽 Apple iPhone 十大反人类的设计 All In One
吐槽 Apple iPhone 十大反人类的设计 All In One 不支持 GPS 快捷开关 每次都要到,设置> 隐身 > 位置,脑残的设计 顶部的状态栏,网络不支持显示网速 顶部的状 ...
- Tailwind CSS in Action
Tailwind CSS in Action Tailwind CSS是一个高度可定制的低级CSS框架,它为您提供了构建定制设计所需的所有构造块,而无需烦恼要覆盖的烦人的自以为是的样式 https:/ ...