HTML浮动导致高度塌陷,HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)...
元素浮动定义
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
why 子元素浮动 会导致父元素 高度塌陷?
这是因为内部的元素设置float:left || right后,就丢失了clear:both和display:block(持怀疑态度)的样式,所以外部的父容器不会被撑开。
举个?:
子元素未设置浮动,父元素自动被撑开
.father {
width: 400px;
border: 1px solid blue;
}
.son {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: yellow;
}
子元素设置浮动,父元素高度塌陷
.father {
width: 400px;
border: 1px solid blue;
}
.son {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: yellow;
float: left;
}
闭合浮动的常见解决方案
最终,我们要的效果是要跟没设置浮动之前的效果一样,让父元素高度自适应:
在浮动元素之后添加清除浮动的子元素:
.father {
width: 400px;
border: 1px solid blue;
}
.son {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: yellow;
float: left;
}
.clearFloat {
width: 100%;
height: 0;
clear: both;
}
父元素设置 overflow: hidden
.father {
width: 400px;
border: 1px solid blue;
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: yellow;
float: left;
}
是不是很神奇!因为子元素的浮动,会导致父元素误认为content高度为0(即蓝色边框为一条线),所以父元素设成overflow:hidden溢出隐藏的话,直觉上应该子元素由于溢出导致不显示才对。但真实效果是:父元素设成overflow:hidden溢出隐藏后,父元素高度居然自适应了!这是怎么回事呢?是因为 BFC(Block Formatting Context),感兴趣的童鞋,点击链接了解一下哈...
用 :after 伪元素,思路是用:after元素在div后面插入一个隐藏文本”.”,隐藏文本用clear来实现闭合浮动
.father:after {
clear: both;
content: "."; //任意文本如“dfgdfg”
display: block;
height: 0; //高度为0且hidden让该文本彻底隐藏
visibility: hidden;
}
HTML浮动导致高度塌陷,HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)...相关推荐
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
准确的说,float浮动属于半脱离文档流,1.float浮动跟position:absolute一样拥有脱离文档流的功能,但是float虽然脱离了文档流但是仍然会占据位置,其他的文本内容会按照顺序继续 ...
- css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
- relative会脱离文档流吗_position:absolute会使元素脱离文档流
当元素设置position:absolute时,会脱离正常文档流,后面元素会忽略该元素->覆盖 可以给元素设置min-height解决 ----------------------------- ...
- 一天搞定CSS: 浮动(float)及文档流--10
浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...
- Word文档中插入的图片显示不全、嵌入式图片显示不全解决方法,仅设置图片为单倍行距方法
最近突然发现 word 里插入的嵌入式图片只显示底下一部分,其它类型的图片又不能排版整齐,后来终于发现了原因. 问题展示: 因为我设置了段落的行距为固定值的缘故,改为单倍行距就好了. 但是我又不想让改 ...
- WPS打开文档时显示“文档被其他程序占用,是否以只读的方式”打开解决方法
造成整个问题的原因大概有两种: 1.当前文档被其他不同的应用占用 解决方法:关闭其他应用即可. 2.自己的账户所属应用或组,没有写入的权限: 解决方法:给自己的账号增加写入权限: 首先找到文件所在的磁 ...
- 电脑浏览器打不开html文档,win7浏览器打不开本地html文件的原因及解决方法
今天小编和大家分享深度技术win7系统浏览器打不开本地html文件的原因及解决方法,相信大家都有遇到过html文件打不开,一直显示主页而不是html页面,其实很大部分是浏览器设置问题.有什么办法可以解 ...
- python库文档的错误_自己编程中遇到的Python错误和解决方法汇总整理
开个贴,用于记录平时经常碰到的Python的错误同时对导致错误的原因进行分析,并持续更新,方便以后查询,学习. 知识在于积累嘛!微笑 +++++++++++++++++++++++++++++++++ ...
- 文档流,浮动,定位的区别和处理
1.文档流 - 所有的元素默认情况下都是在文档流中存在的 - 文档流是网页的最底层 - 元素在文档流中的特点: - 块元素 1.默认宽度 ...
最新文章
- python等差数列末项计算_Python 30道高频面试题及详细解答
- c++内存管理-VC6
- cifs挂载 mount ubuntu_centos或者Ubuntu挂载windows10文件夹
- windeployqt.exe 发布windows下qt产生的exe程序
- spark源码分析之任务调度篇
- 单机千万并发连接实战(修订版)
- 测试 —— 与开发双手互搏的艺术
- java 创建消息队列_java - 在Java中动态创建异步消息队列 - 堆栈内存溢出
- tp 框架防sql注入
- QSS实践汇总(3)——QComboBox样式(风格)
- 2000级2班同学聚会邀请函.doc
- ZZNU-正约数之和(DP)
- 35个非常出彩的 Flash 网站作品欣赏
- 英雄联盟(LOL)3d模型显示
- ITRON入门之任务(TASK)的理解
- Visual Studio 插件开发
- Java基础冒泡排序——高低输出十个学生的成绩
- mysql-获取当前系统时间
- 校园点餐系统:点餐、食堂管理、商户管理和菜品管理(Java和MySQL)
- 小程序发送订阅消息,微信公众号发送消息模板
热门文章
- 任意门怎么用团发_平开门、推拉门都out了!衣柜门这样设计,实用方便又大气!...
- ConcurrentLinkedQueue
- html js清除缓存,js清除浏览器缓存的几种方法
- 无显示器u盘安装centos_最新版 CentOS 8.1.1911 安装教程及常见问题图文详解
- mysql 唯一记录_mysql选择唯一记录
- java json写入内存_如何在客户端上减少JSON.stringify使用的内存量?
- 疫情期间,在家使用java的SSH框架实现一个简单的任务调度系统
- python中升级pip报错_linux系统下pip升级报错的解决方法
- http协议组成(请求状态码)
- 有趣的js匿名函数写法(function嵌套)