51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
信创认证
公众号矩阵
移动端
视频课 免费课 排行榜 短视频 直播课 软考学堂
全部课程 软考 信创认证 华为认证 厂商认证 IT技术 PMP项目管理 免费题库
在线学习
文章 资源 问答 课堂 专栏 直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
CKA（Kubernetes 管理员认证）精品班
按照企业k8s需求进行技能培训，帮助用户快速拿下CKA认证，K8S采用新版本进行授课，课程内容全、讲解详细 。 免费试学
软考高级：系统架构设计师精品班
根据考试大纲对知识点、高频考点进行深入讲解，传授答题技巧及判断标准，助力高效备考。 免费试学
信创认证：系统架构师精品班（高级）
信息技术应用创新人才考试评价 免费试学

html5防塌陷 css塌陷怎么解决
什么是高度塌陷?父元素高度自适应，子元素float之后，造成父元素高度为0，称为高度塌陷。他的产生条件就是子元素浮动 如图 如图：方法一：为父元素设置高度给父元素添加固定高度，适合做高度固定的布局建议：不推荐使用，只建议高度固定的布局使用方法二：给父元素添加overflow:hidden优点：简单，代码少，浏览器支持好缺点：不能和position配合使用，因为超出的尺寸会被隐藏建议：在页面布局
html5防塌陷
父类
页面布局
清除浮动
转载
编程艺术之光
2024-05-21 13:10:19
89阅读

css 绝对定位 容器塌陷
文章目录前言一、什么是定位？二、常用的四种定位方法 1.相对定位 2.绝对定位3.固定定位4.粘滞定位总结 前言       本文主要介绍了CSS中常用的四种定位方法一、什么是定位？定位是一种更加高级的布局手段，就是将指定的元素摆放到页面的任意位置，使用position属性来设置定位；可选值—— static 默认值，元素是静
css 绝对定位 容器塌陷
css
css3
html
前端
转载
云端行者
9月前
44阅读

CSS之高度塌陷问题1
.box1{ /* * 为box1设置边框 * 宽度和父
CSS
高度塌陷
flow
html
文档流
原创
小城里OL
2023-01-11 20:21:54
102阅读

css margin 外边距塌陷问题
一，margin 外边距塌陷问题 当时说到了盒模型，盒模型包含着margin，为什么要在这里说margin呢？因为元素和元素在垂直方向上margin里面有坑。 我们来看一个例子： html结构： <div class="father"> <div class="box1"></div> <div c
css
原创
nice_小浪
2021-07-29 09:41:44
592阅读

CSS——父级边框塌陷问题
clear clear:right; 左侧不允许有浮动元素 clear:left; 右侧不允许有浮动元素 clear:both; 两侧不允许有浮动元素 clear:none; 解决方案 1.增加父级元素的高度 #father{ border:1px solid #000; height:800px; ...
父类
父级元素
清除浮动
文档流
解决方案
转载
mb5fdcae58218c5
2021-08-29 16:54:00
1213阅读
2评论

[css] 解决问题---高度塌陷
不加浮动，加了浮动，出现高度塌陷解决办法###给父元素添加height<!DOCTY
css
html
ci
清除浮动
原创
533_
2022-12-21 10:24:16
92阅读

CSS（11）父级边框塌陷问题
CSS（11）父级边框塌陷问题 父级边框塌陷问题 clear  clear : right;   右侧不允许有浮动元素 clear : left;   左侧不允许有浮动元素 clear : both;   两侧不允许有浮动元素 clear : none; 解决方法： 1.增加父级元素的高度  #box{   width: 1500px;   height: 500px;   border
html
css
父级元素
解决方法
宽高
转载
mob60475703f08d
2021-06-26 23:07:00
214阅读
2评论

css position:absolute 父元素高度塌陷
问题在使用iSroll v4插件时，无法滚动到底部，从源码得知最大滚动位置由maxScrollY决定。从源
css
Web
文档流
绝对定位
原创
wangjun5159
2023-06-28 14:11:38
638阅读

css篇:外边距嵌套塌陷问题
一、外边距嵌套塌陷问题当想要调节父级元素里面的子级元素时候，经常会出现带着父级元素一起下调的情况。那么该如何解决这种情况呢？有以下几种办法。第一种:给父级元素添加border 第二种:给父级元素添加内边距第三种:给父级元素添加属性overflow:hidden第四种:给父级元素设置浮动二、外边距合并相邻块级元素问题原因：当相邻两个盒子他们外边距合并会选择两者更大的值取。上下两个盒子：div1{ma
外边距
css
转载
mob604756e4006a
2021-03-13 21:04:39
482阅读
2评论

CSS之解决高度塌陷问题（三）
.box1{ border: 1px solid red; } .box2{ *
CSS
高度塌陷
clear
html
css
原创
小城里OL
2023-01-11 20:29:11
76阅读

css 绝对定位 容器高度 css绝对定位高度塌陷
1、在文档流中，父元素的高度默认是被子元素撑开的，当子元素浮动以后，子元素脱离文档流，此时将导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。2、由于父元素塌陷，则父元素下的所有元素向上移动，导致页面布局混乱。3、根据w3c的标准，页面中元素都有一个隐含的属性叫Block Formatting Context简称BFC（IE6及以下版本不支持），该属性可以设置打开或关闭，默认为关闭，当开启以后
css 绝对定位 容器高度
清除浮动
文档流
页面布局
转载
mob64ca141834d3
2024-04-26 22:05:28
671阅读

CSS 布局避坑！搞定浮动塌陷 + margin 塌陷，样式再也不跑偏
其实问题不在子元素，而在父元素 ——absolute 定位的元素，是相对于 “最近的已定位祖先元素”（也就是设置了 position
#AI商业洞察
#AI
#商业
#即兴小索奇
CSS
原创
即兴小索奇
10天前
36阅读

高度塌陷BFCBFC解决高度塌陷
BFC解决高度塌陷 定义：BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会
块级元素
外边距
绝对定位
原创
wx62aac82759217
2022-06-16 17:40:08
289阅读

如何解决CSS外边距塌陷的问题
首先我们先看出现外边距塌陷的三种情况：1.当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较大者。<style>   .box1 {      width: 150px;      height: 100px;      margin-bottom: 20px;      backgro
CSS
转载
mb6004f88aa04b6
2021-01-20 19:48:57
188阅读
2评论

【CSS】1035- 再看 margin 塌陷和合并问题
前言 小问题总是被人视而不见，等遇到的时候又突然想不起来，所以我们需要经常总结，这可以帮助我们更好的记忆东西。今天我们来总结两个不起眼的小问题：​​margin​​​塌陷和​​margin​​合并margin塌陷 什么是margin塌陷 我们先来看个例子，然后引出什么是​​margin​​塌陷需求：在父子元素中，通过​​marigin​​​让父元素相对左边及顶部各距离​​100px​​​,也让子元
语法规则
html
css
转载
pingan8787
2022-10-21 15:22:09
73阅读

web前端开发包，CSS外边距塌陷问题
一.我们为什么需要CSS？ 　　使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属
面试
前端
HTML
CSS
字符串
原创
mb65e3488ceb2f1
2024-03-16 11:36:06
46阅读

高度塌陷
一、高度塌陷 二、解决高度塌陷方案一 三、清楚浮动 四、解决高度塌陷方案二 五、解决高度塌陷方案三
html+css
html
css
清除浮动
块元素
转载
mob60475705c8db
2019-04-27 14:29:00
140阅读
2评论

css: clearfix解决外边距折叠及高度塌陷问题
.clearfix::before,.clearfix::after { /* 解决外边距折叠 */ content: ""; display: table; /* 解决高度塌陷 */ clear: both;}
外边距折叠 高度塌陷
原创
frank_zfh
2022-02-03 17:28:04
286阅读

CSS--解决margin塌陷(margin-top失效)--实例
当2个垂直外边距相遇时，他们将合并为一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。下述场景会导致margin合并：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上/下外边距会发生合并。
css
前端
html
外边距
解决方案
原创
IT利刃出鞘
2022-02-15 15:44:25
528阅读

CSS之高度塌陷问题解决方案
.box1{ border: 10px red solid;
CSS
display
flow
zoom
html
原创
小城里OL
2023-01-11 20:29:27
108阅读
  • 1
  • 2
  • 3
  • 4
  • 5
精品课程领资料
免费资料>
2025软考
系统架构设计师 系统规划与管理师 软件设计师 系统集成项目管理工程师
信创认证
系统架构师 信创集成项目管理师 信创规划管理师 系统开发工程师
厂商认证
CKA/CKS架构师 红帽认证工程师 Oracle-OCP认证 Oracle-OCM认证
IT技术
数据库高级工程师 AIGC大模型实战 Linux云计算架构师 Python全栈开发
华为认证
数通HCIP认证 云计算HCIE认证 华为存储HCIE认证 HCIP安全认证
相关文章

CSS之解决高度塌陷问题方法终极版

外边距塌陷

伟大的塌陷

mergin塌陷问题

margin塌陷问题

CSS元素高度塌陷的几种常见解决办法！

css：垂直方向外边距margin塌陷问题及解决

【响应式Web前端设计】css中：overflow：hidden解决塌陷

Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号

关于我们
官方博客 全部文章 热门标签 班级博客
了解我们 网站地图 意见反馈
友情链接
鸿蒙开发者社区 51CTO学堂
51CTO 软考资讯