css 高度塌陷_高度塌陷问题_前端技术文章 - SegmentFault 思否
1. 高度塌陷
在文档流中,父元素的高度默认被子元素撑开,也就是说子元素多高,父元素就多高。但是, 当为子元素设置浮动后,子元素会完全脱离文档流。此时,将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。
所以在开发中一定要避免出现高度塌陷的问题。
Title
.box1{
border: 10px solid red;
}
结果:父元素box1的高度被子元素box2的a内容撑开。
Title
.box1{
border: 10px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
}
结果:父元素的高度被子元素的高度100撑开。
若为子元素设置浮动:
Title
.box1{
border: 10px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
float: left;
}
.footer{
height: 50px;
background-color: pink;
}
结果:子元素浮动,父元素没有了高度。footer向上移动。
为父元素设置高度,避免塌陷:
.box1{
border: 10px solid red;
height: 100px;/* 设置父元素的高度*/
}
结果:
但是当子元素的高度较高时,又会产生溢出的问题。父元素的高度一旦固定,父元素的高度将不能自动适应子元素的高度,所以这种方案不推荐使用:
.box2{
width: 100px;
height: 200px;
background-color: greenyellow;
float: left;
}
结果:
2. 解决塌陷问题
根据w3c的标准,在页面中的元素都有一个隐含的属性叫做Block Formatting Context, 简称BFC。该属性可以设置打开或者关闭,默认是关闭的。
当开启元素的BFC以后,元素将会具有如下的特征:
(1) 父元素的垂直外边距不会和子元素重叠
(2) 开启BFC的元素不会被浮动元素所覆盖
(3) 开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC:
设置元素浮动
使用这种方式,虽然可以撑开父元素,但是会导致父元素的宽度丢失,而且使用这种方式也会导致下边的元素上移,不能解决问题
设置元素绝对定位
也有上面的问题
设置元素为inline-block
可以解决问题,但是会导致宽度丢失,不推荐使用这种方式
将元素的overflow设置为一个非visible的值
推荐方式: 将父元素overflow设置为hidden,是副作用最小的开启BFC的方式
Title
.box1{
border: 10px solid red;
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
float: left;
}
.footer{
height: 50px;
background-color: pink;
}
结果:
注意: 但是在IE6中是不支持BFC的。所以引入hasLayout。
在IE6中有另一个隐含的属性叫做hasLayout,该属性的作用和BFC类似,所以IE6浏览器可以通过开hasLayout来解决问题。开启方式有很多,但是副作用最小的方式是: 直接将元素的zoom设置为1即可。
zoom表示放大的意思,后边跟一个数值,写几就是将元素放大几倍。
zoom:1 表示不放大元素,但是通过该样式可以开启hasLayout。
zoom这个样式,只在IE中支持,其他浏览器都不支持。
zoom: 1;/* 兼容ie6*/
overflow: hidden;/* 兼容非ie6*/
2. 页面导航条练习
选中元素,看它的样式,上下键调整样式的值。
使用list-style: none 去掉项目符号。
Title
/* 清除默认样式 */
*{
margin: 0;
padding: 0;
}
/* 设置ul */
.nav{
list-style: none;/* 去除项目符号*/
/*
* 在IE6中,如果为元素指定了一个高度,则会默认开启hasLayout
*/
width: 1000px;
background-color: #6495ED;/*背景颜色必须设置,否则会是透明白色*/
margin: 50px auto;/* auto设置元素居中*/
overflow: hidden;/* 解决高度塌陷*/
}
.nav li{
float: left; /*设置li向左浮动*/
width: 25%;/*为li指定一个高度,占父元素ul的25%*/
background-color: blue;
}
.nav a{
width: 100%;/*为a指定一个高度,占父元素li的100%*/
display: block;/*将a转换为块元素*/
text-align: center;/*设置文字居中*/
text-decoration: none;/*去掉超链接的下划线*/
padding: 5px 0;/*设置一个上下内边距*/
color: white;/*设置字体颜色*/
font-weight: bold;/*设置加粗*/
}
.nav a:hover{
background-color: #C00;
}
- 首页
- 新闻
- 联系
- 关于
结果:
当鼠标移入时:
3. 解决高度塌陷的最终方案
我们有时候希望清除其他元素浮动对当前元素产生的影响,这时可以使用clear来完成功能。
clear 可以用来清除其他浮动元素对当前元素的影响
可选值:
none 默认值,不清除浮动影响
left 清除左侧浮动元素对当前的影响
right 清除右侧浮动元素对当前的影响
both 清除两侧浮动元素对当前的影响
清除对他影响最大的那个元素的浮动
Title
.box1{
border: 10px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
float: left;/* 子元素浮动,导致父元素高度塌陷*/
}
结果:
方法2:可以在高度塌陷的父元素的最后,添加一个空白div。由于这个div并没有浮动,所以它可以撑开父元素的高度,然后在对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度,基本没有副作用。
缺点: 使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构。
Title
.box1{
border: 10px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
float: left;/* 子元素浮动,导致父元素高度塌陷*/
}
.clear{
clear: left;
}
结果:
方法3:可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动。这样和添加div的原理一样。只是不会再页面中添加多余的div,这是我们最推荐的方式,几乎没有副作用。
Title
.box1{
border: 10px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
float: left;/* 子元素浮动,导致父元素高度塌陷*/
}
.clearfix:after{
content: "";/*添加一个内容*/
display: block;/*转换为一个块元素*/
clear: both;/*清除两侧的浮动*/
}
.clearfix{
zoom:1;/* 在IE6中不支持after伪类,需要使用hasLayout来处理*/
}
结果:
方法4: 改进clearfix
经过修改后的clearfix,是一个多功能的,既可以解决搞得塌陷,又可以确保父元素和子元素的垂直外边距不会重叠(子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素)。
Title
.box1{
border: 10px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: greenyellow;
float: left;/* 子元素浮动,导致父元素高度塌陷*/
}
.box3{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box4{
width: 100px;
height: 100px;
background-color: pink;
margin-top: 100px;
}
.clearfix:before,
.clearfix:after{
content: "";/*添加一个内容*/
display: table;
clear: both;/*清除两侧的浮动*/
}
.clearfix{
zoom:1;/* 在IE6中不支持after伪类,需要使用hasLayout来处理*/
}
结果:
css 高度塌陷_高度塌陷问题_前端技术文章 - SegmentFault 思否相关推荐
- python之父去面试-面试题_个人文章 - SegmentFault 思否
1 Spring Bean是什么? 在spring中由Spring创建和管理的对象称为bean, bean有相关的特性,例如懒加载,作用域,生命周期这些. 懒加载就是延迟加载,启动的时候,会创建所有对 ...
- python求组合数_求组合数的算法_Cppowboy's Blog - SegmentFault 思否
问题:求解组合数C(n,m),即从n个相同物品中取出m个的方案数,由于结果可能非常大,对结果模10007即可. 方案一 暴力求解,C(n,m)=n(n-1)-*(n-m+1)/m! int Combi ...
- python质因子分解_质因子分解_个人文章 - SegmentFault 思否
质因子分解的问题就是给定一个n使得n能够分解为多个因子的乘积形式,并且相同因子用指数形式表示: 例如180=2^23^25; 对于这个问题,很好理解,我们的目的就是寻找其因子,通常的方法也就是从0开始 ...
- python页面转图片_网页转图片_技术分享 - SegmentFault 思否
将一段文字转成图片,比如常用的长微博工具 这里用 PHP 来处理. text2pic composer require dsgygb/text2pic touch test.php require ' ...
- java - websocket配合spring-security使用token认证_个人文章 - SegmentFault 思否
使用框架介绍 spring boot 1.4.3.RELEASE spring websocket 4.3.5.RELEASE spring security 4.1.3.RELEASE sockjs ...
- node.js - Nodejs 分布式事务_个人文章 - SegmentFault 思否
事务是恢复和并发控制的基本单位,保证 ACID:原子性.一致性.隔离性.持久性. 对于全是异步的 Nodejs 而言, 并不适合做事务操作: 代码书写上: try ... catch ... 是写给人 ...
- java9 gc log参数迁移_个人文章 - SegmentFault 思否
序 本文主要研究一下java9 gc log参数的迁移. 统一JVM及GC的Logging java9引进了一个统一的日志框架,对gc log的输出进行了统一的配置. 相关JEP(JDK Enhanc ...
- java 声明式编程_声明式编程 - SegmentFault 思否
这是Bartosz Milewski关于范畴论的博客的第二部分,第一部分已经由garfileo翻译完成,建议大家先看第一部分.第一部分导言的地址是写给程序员的范畴论 第二部分的导言 在本书的第一部分我 ...
- mysql事务怎么加排他锁_八种方法实现CSS页面底部固定 - SegmentFault 思否
共享锁.排他锁 InnoDB 实现了两种类型的锁机制:共享锁(S)和排他锁(X).共享锁允许一个事务读数据,不允许修改数据,如果其他事务要再对该行加锁,只能加共享锁:排他锁是修改数据时加的锁,可以读取 ...
最新文章
- ArcGIS Engine开发-TOCControl中实现图层的拖放
- KlayGE 4.0中Deferred Rendering的改进(五)完结篇:Post process
- SQLite API
- [云炬创业学笔记]第三章商业创意的发掘与评估测试2
- java 枚举类型enum用法_别再说Python没有枚举类型了,好好看看
- 51CTO的技术门诊谈OSSIM
- (转) android UI进阶之用gallery实现可滑动的Tab
- 程序员的进阶课-架构师之路(17)-堆
- python 分词nlp,学习NLP的第四天——hanlp字典分词的Python实现,4,HanLP,词典
- 戴机械手表有哪些事情就不能做了?
- 最简单的基于FFmpeg的移动端例子附件:SDL Android HelloWorld
- 深入详解Java线程池——ThreadPoolExecutor
- cygwin清屏技巧
- WebRTC服务器——Licode 环境搭建
- 【操作系统内存管理(基本概念)】
- Ubuntu 20.04 下 MOSEK 9.3 的安装
- 燕秀计算机打印区域文字高度,燕秀快捷键(全)
- pandas的认识与dataframe的认识 day04课件代码
- 三阶段最小二乘法 回归分析 3SLS python实现
- PNP : Work Cound Frequence
热门文章
- 狗子课堂 二 虚拟机配置
- 0001-Flink安装---Flink安装(Standlone模式)
- Unity尝试从零创建一个敌人
- PI数据库开发-java(读写pi中的时序数据和关系数据)
- 【个推CTO谈数据智能】之数据安全计算体系
- 面向2022届毕业生-自动驾驶/SLAM/DL/C++ 岗位收集整理
- 2022年最新《谷粒学院开发教程》:5 - 章节管理
- 【解决】subprocess.CalledProcessError: Command ‘(‘lsb_release‘, ‘-a‘)‘ returned non-zero exit status 127
- [Vue][面试]谈一谈对vue的设计原则的理解
- vue3.x 重复点击路由报错