高度塌陷与BFC
高度塌陷的产生条件
- 子元素浮动,脱离文档流
- 子元素绝对定位或固定定位,脱离文档流
定位产生的高度塌陷只能通过加固定高度或更换其他方案解决塌陷,本文主要讨论浮动产生塌陷的解决方法。
高度塌陷的解决方法
1、直接给父元素加高度
div{
border: 5px solid black;
height: 200px;
}
p{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
优点:代码简单,容易理解
缺点:自适应性不强
建议:不建议使用
2、利用clear:both;声明
2-1 在所有子元素的最后添加块元素,声明clear:both;
div{
border: 5px solid black;
}
p{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
span{
display: block;
border: 5px solid red;
clear: both;
}
<div>父元素div
<p>子元素p</p>
<span></span>
</div>
原理:clear:both清除span两边的浮动,让父级div能自动获取到高度
优点:简单,代码少,所有主流浏览器都支持clear属性
缺点:不易理解,添加空白元素造成代码冗余
建议:不建议使用
2-2 万能清除法
.clearall {
/* 可以解决IE6、IE7、IE8浏览器兼容问题 */
zoom: 1;
}
.clearall::after {
/* 3个核心声明 起到方法2-1相似作用*/
content: "";
display: block;
clear: both;
/* 3个附属声明 解决一部分浏览器兼容问题 */
height: 0;
overflow: hidden;
visibility: hidden;
}
<div class="clearall">父元素div
<p>子元素p</p>
</div>
原理:给父元素设置clearall类,赋予其一个::after伪元素,该元素达到与方法2-1类似的效果
优点:可以作为公共类,方便使用,兼容性好
缺点:代码多,不易初学者理解
建议:建议使用,建议定义公共类,以减少CSS代码
3、利用BFC特性
BFC(Block formatting context)直译为块级格式化上下文,他有这样一个特性:
计算BFC的高度时,浮动元素也参与计算
将父元素触发为BFC即可解决浮动造成的高度塌陷元素触发BFC的条件
- html标签为BFC
- float属性值不为none
- overflow属性值不为visible
- display属性值为inline-block、table-cell、table-caption、flex、inline-flex其中之一
- position属性值为absolute或fixed
3-1 给父元素也添加浮动声明
div {
border: 5px solid black;
float: left;
}
p {
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
父元素成为浮动元素,脱离文档流:
3-2 更改父元素的overflow属性为hidden/auto/scroll
overflow: hidden;
超出内容会被隐藏:
overflow:auto;
元素内容超出容器会出现滚动条:
overflow:scroll;
父元素出现滚动条:
3-3 更改父元素的display属性触发BFC
display: inline-block;
display: table-cell;
display: table-caption;
display: flex;
display: inline-flex;
3-4 更改父元素的position属性为absolute或fixed
position: absolute;
position: fixed;
父元素会脱离文档流。
总结
由以上可知,解决高度塌陷的方法有很多,选择适合当前布局效果的方法才是最重要的。
一般无特殊情况,推荐选择使用兼容性好用起来方便的万能清除法。
高度塌陷与BFC的更多相关文章
- 整理高度塌陷与BFC
当面试官问道你高度塌陷时,人们第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: h ...
- 高度塌陷与 BFC
1. 高度塌陷 在浮动布局中,父元素的高度默认是被子元素撑开的 当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失 父元素高度丢失以后,其下的元 ...
- 加overflow-hidden就可以解决高度塌陷问题,overflow-触发BFC
1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position ...
- 浅谈BFC与高度塌陷
这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...
- 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)
浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...
- __x__(29)0908第五天__高度塌陷 问题
高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...
- css关于浮动的高度塌陷
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css之高度塌陷及其解决方法
浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ...
- CSS高度塌陷问题解决方案
高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
随机推荐
- Shader专题:卡通着色(一)控制颜色的艺术
什么是 Shader? 关于什么是 Shader ,各种百科各种教程都有说过,但是今天我们就从一个另一个角度去试着理解什么是 Shader? 我们先看下 Shade 的英文意思,如下: v.给...遮 ...
- 用JS实现改变文本框的只读属性
<input id="aaa" readonly><input id="bbb" readonly> <script>doc ...
- application.yml和application.properties文件的区别
maven项目 .yml文件时树状结构,层级浅时比较方便,层级深的时候就比较麻烦了 .properties文件时属性访问结构,层级深浅对它来说是一样的,而且相较于.yml类型的文件比较好配置,但缺点也 ...
- JVM源码分析之Java对象头实现
原创申明:本文由公众号[猿灯塔]原创,转载请说明出处标注 “365篇原创计划”第十一篇. 今天呢!灯塔君跟大家讲: JVM源码分析之Java对象头实现 HotSpot虚拟机中,对象在内存中的布局分为三 ...
- 主流App自动化测试框架对比
1.主流App自动化测试框架对比 2.Appium自动化测试框架 官方网址:http://appium.io/ 跨架构:支持原生.混合以及web移动应用 跨平台:Android & I ...
- SQL基础随记3 范式 键
SQL基础随记3 范式 键 什么是范式?哈,自己设计会使用但是一问还真说不上来.遂将不太明晰的概念整体下 什么是 & 分类 范式(NF),一种规范,设计数据库模型时对关系内部各个属性之间的 ...
- Linux终端音乐播放器cmus攻略: 操作歌单
目录 1. 安装 2. 操作说明 2.1. *PlayList歌单 2.2. 其他 3. 视图切换 4. 使响应Media/play按键 4.1. 编译安装 cmus是一款开源的终端音乐播放器.它小巧 ...
- Django---进阶14
目录 登陆功能 首页搭建 admin后台管理 用户头像展示 图片防盗链 个人站点 侧边栏筛选功能 登陆功能 def login(request): if request.method == 'POST ...
- mysqladmin 的用法及所带参数
- 技术干货丨通过wrap malloc定位C/C++的内存泄漏问题
摘要:用C/C++开发的程序执行效率很高,但却经常受到内存泄漏的困扰.本文提供一种通过wrap malloc查找memory leak的思路. 用C/C++开发的程序执行效率很高,但却经常受到内存泄漏 ...