浮动的问题-高度塌陷

最新推荐文章于 2024-05-18 11:09:56 发布
最新推荐文章于 2024-05-18 11:09:56 发布
阅读量26 收藏
点赞数 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：默认值
  • 清除浮动的目的：让父元素计算总高度时候，把浮动子元素的高度算进去

高度塌陷示例：

仗剑恬雅人
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS-高度塌陷布局乱问题详解
主营前端方向，技术栈是vue
11-15 645
高度塌陷布局乱问题(子元素浮动无法撑起父元素高度、方法1zoom、方法2clear: both清浮动、方法3after伪类添加空白元素清除浮动、最终方案clearfix)
文档流html开发中遇到的高度塌陷 浮动 定位产生的问题,.pptx
12-10
html开发中遇到的高度塌陷 浮动 定位产生的问题, 以及使用bfc/清除伪元素清除浮动的方式
css 浮动 float 03-高度塌陷问题
Linnc
07-12 132
css 浮动 float 03-高度塌陷问题
盒子模型-高度塌陷问题
shao_xuan_的博客
10-22 1020
盒子模型-高度塌陷问题使用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 219
CSS-高度塌陷问题 文章目录CSS-高度塌陷问题表现产生的原因高度塌陷的解决办法：BFC相关 表现 例如： HTML： <div class="first"> <div class="first-child1">first-child1</div> <d
8.3 Web前端-高度塌陷
执笔绘江山的博客
08-03 206
可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用，但是使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。那么，我们如何解决这个问题呢？...
html-浮动以及高度塌陷
D1573的博客
08-24 406
浮动的特点 如何解决高度塌陷
HTML浮动导致高度塌陷,浮动元素特性（解决高度塌陷问题）
weixin_39654848的博客
06-20 128
浮动的特性.outer{border: 10px solid tomato;/* BFC Bolck Formatting Context 块级格式化环境BFC是CSS中一个隐藏的属性，开启BFC后会使变成一个独立的布局区域开启BFC后的特点：1.开启BFC的元素不会被浮动元素覆盖2.开启BFC的元素不会和子元素的外边距不会重叠3.开启BFC的元素可以包含浮动的子元素可以通过一些设置来开启元素的B...
CSS-float浮动和高度塌陷问题详解
主营前端方向，技术栈是vue
11-21 527
float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)
css高度塌陷问题的解决方案
11-21
所以在开发中一定要避免出现高度塌陷的问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">
CSS高度塌陷.md
08-27
父元素在文档流中默认的高度是由子元素撑开的，由于子元素添加浮动后会脱离文档流，无法撑起父元素，会导致父元素的高度塌陷。本文解释了CSS高度塌陷的原因及高度塌陷解决方案。
父级元素未设置高度和宽度时高度塌陷问题的解决方法
09-25
父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零，前提是它只包含浮动元素，解决高度塌陷的问题很简单，可以浮动父级元素、清除法等等，均可实现
css浮动中避免包含元素高度为0的4种解决方法
09-25
当一个元素只包含浮动元素的时候，它会出现高度折叠，即元素的上下底边重合，和高度为0效果一样，针对这个问题与大家分享四种解决方法，感兴趣的你可以参考下本文或许对你更好的理解css有所帮助
HTML浮动导致高度塌陷,前端–解决浮动引起的高度塌陷问题
weixin_35036735的博客
06-20 583
今天学习了如何解决HTML页面子元素浮动时由于脱离文档流导致的其父元素(未设置宽高)高度塌陷的问题。接下来，我们来谈谈这个问题的解决步骤。首先我们先引出一个概念:Block Fomatting Context，我们称为块格式化上下文 简称BFC，这是每个元素都具有的一个属性！开启BFC的元素都有以下特点:1.开启了BFC的元素与其父元素的垂直外边距不会发生重叠2.开启了BFC的元素会包含其浮动的子...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 671
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1110
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 509
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器
最新发布
shijialeya
05-18 382
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器进行数据格式化。
什么是div高度塌陷
09-03
div高度塌陷指的是当div元素内部的内容使用浮动或绝对定位进行布局时，父元素的高度无法自动适应子元素的高度的现象。这种现象会导致父元素的高度被压缩到仅包围其非浮动或非定位子元素的高度。当父元素的高度被压缩...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值