浮动的问题-高度塌陷

最新推荐文章于 2024-11-01 10:18:14 发布
最新推荐文章于 2024-11-01 10:18:14 发布
阅读量50 收藏
点赞数 1
分类专栏： 0基础自学前端 文章标签： 前端 html css html5 css3 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45897045/article/details/136186607
版权

高度塌陷：浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度

  • 解决父元素高度塌陷的问题：一般叫做清浮动（清理浮动，清除浮动）
    • clear属性：可以指定一个元素是否必须移动到它之前的浮动元素的下面
      • left：要求元素的顶部低于之前生成的所有向左浮动元素的底部
      • right：要求元素的顶部低于之前生成的所有右浮动元素的底部
      • both：要求元素的顶部低于之前生成的所有浮动元素的底部
      • none：默认值
  • 清除浮动的目的：让父元素计算总高度时候，把浮动子元素的高度算进去

高度塌陷示例：

仗剑恬雅人
关注
专栏目录
css 浮动 float 03-高度塌陷问题
Linnc
07-12 200
css 浮动 float 03-高度塌陷问题
CSS-高度塌陷布局乱问题详解
主营前端方向，技术栈是vue
11-15 1016
高度塌陷布局乱问题(子元素浮动无法撑起父元素高度、方法1zoom、方法2clear: both清浮动、方法3after伪类添加空白元素清除浮动、最终方案clearfix)
盒子模型-高度塌陷问题
shao_xuan_的博客
10-22 1248
盒子模型-高度塌陷问题使用margin-top时造成塌陷使用margin-top时造成塌陷解决方案1、给父元素添加边框属性，让父元素的边框颜色和浏览器的背景颜色一样。如下：2、给父元素添加浮动属性（float）3、溢出隐藏4、给父元素设置display：table;5、给父元素添加position:fixed;6、给父类添加伪元素 使用margin-top时造成塌陷 使用margin-top造成的塌陷是由于当标签出现父子关系，给子元素添加margin-top属性，让它距离父盒子顶部50px时，却出现父元素距
CSS-高度塌陷问题
u014427946的博客
12-24 248
CSS-高度塌陷问题 文章目录CSS-高度塌陷问题表现产生的原因高度塌陷的解决办法：BFC相关 表现 例如： HTML： <div class="first"> <div class="first-child1">first-child1</div> <d
8.3 Web前端-高度塌陷
执笔绘江山的博客
08-03 257
可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用，但是使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。那么，我们如何解决这个问题呢？...
H5C3-高度塌陷【清除浮动】
码农小黑的博客
06-29 188
解决浮动造成的高度塌陷问题
html-浮动以及高度塌陷
D1573的博客
08-24 448
浮动的特点 如何解决高度塌陷
margin-top塌陷问题的现象与解决
热门推荐
FreeSpider
05-26 1万+
margin-top塌陷问题 什么是margin-top塌陷 margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。 在未给子元素（绿色部分）添加margin-to...
HTML浮动导致高度塌陷,前端–解决浮动引起的高度塌陷问题
weixin_35036735的博客
06-20 630
今天学习了如何解决HTML页面子元素浮动时由于脱离文档流导致的其父元素(未设置宽高)高度塌陷的问题。接下来，我们来谈谈这个问题的解决步骤。首先我们先引出一个概念:Block Fomatting Context，我们称为块格式化上下文 简称BFC，这是每个元素都具有的一个属性！开启BFC的元素都有以下特点:1.开启了BFC的元素与其父元素的垂直外边距不会发生重叠2.开启了BFC的元素会包含其浮动的子...
12_浮动的问题-高度塌陷.html
10-09
12_浮动的问题-高度塌陷
浮动练习-名人名言-高度塌陷
m0_70552412的博客
07-20 220
1浮动过后的行内元素更像行内块元素,因问一行可以显示多个，并且默认宽度为内容的宽度。当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素。-可以解决问题，但是会导致父元素宽度丢失，而且也会出现三像素的空白，-使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失。元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失。right，清除右侧浮动元素对当前元素的影响。若子元素设置脱离文档流后，就无法撑开父元素的高度，从而导致父元素的高度丢失。...
CSS-float浮动和高度塌陷问题详解
主营前端方向，技术栈是vue
11-21 973
float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)
做一个能适配「手机」的网站需要注意什么
最新发布
illidri的博客
11-01 244
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
前端 常见开发工具使用
weixin_45534301的博客
10-31 457
【代码】前端 常见开发工具使用。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 679
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
Google Recaptcha V2 简单使用
吴家健ken的博客
10-30 287
Google Recaptcha V2 简单使用
Canvas字体高度计算与PDF高度如何统一
aa_qq110的专栏
10-31 303
如果前端使用Canvas生成图片，后面使用nodejs生成PDF，但PDF中没有计算boundingBoxAscent 和boundingBoxDescent的方法，这时可以简单将字的高度前后台统一为字体高度，而不使用基线的方式计算。请懂的大神指出有没有什么问题，有没有更好的方式。
前端JS去重的多种方法
Front end development engineer
10-30 340
在前端开发中，去重操作是非常常见的。无论是处理用户输入、数据请求还是渲染页面，都可能需要对数组或对象进行去重。下面将详细介绍几种常见的前端JS去重方法，并分析它们的优缺点。以上就是前端JS去重的几种常见方法。每种方法都有其优缺点，选择哪种方法取决于具体的需求和场景。如果需要兼容性好且可以保留顺序，可以使用filter()、reduce()或for循环；如果追求性能和简洁性，可以使用Set或Map。对于对象去重，Map是最好的选择。
HTML入门教程3：HTML元素
软考鸭
10-29 514
HTML元素由开始标签、结束标签和内容组成。开始标签用于指定元素的名称，结束标签用于标记元素的结束，而内容则位于开始标签和结束标签之间。HTML元素可以包含属性，这些属性提供了关于元素的额外信息或对元素进行样式设置。通过学习和掌握HTML元素的基本概念、类型、属性、嵌套与结构以及注意事项，您可以创建出结构良好、内容丰富的网页。HTML元素可以嵌套在其他元素中，形成嵌套结构。是段落元素的结束标签，而“这是一个段落”则是元素的内容。元素又可以包含其他内联元素。是段落元素的开始标签，6>`标签定义表格。
HTML开发中的高度塌陷与浮动定位问题及解决策略
在HTML和CSS开发中，经常会遇到一些布局问题，其中“高度塌陷”（也称为“浮动塌陷”）是一个典型的问题。这个问题通常出现在使用浮动（float）布局时，当元素通过浮动脱离了正常的文档流，它们不再对父元素的高度...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值