1. 如果父元素已经规定了度,不会高度塌陷,但可能会溢出(如果子元素总高度超过父元素的话)
  2. 如果父元素没有规定高度:
    2.1 如果所有子元素都浮动,父元素没有高度,这时候给父元素设置边框的话,就会发现边框保不住子元素
    2.2 如果存在没有浮动的子元素,父元素高度取决于没有浮动的子元素,所以如果浮动子元素更高的话,还是会塌陷

解决浮动的办法: clear:both,不允许元素两侧有浮动(你可以理解为,遇到浮动元素会往下挪,从而撑起高度)

子元素无法撑开父元素的情况相关推荐

  1. 子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题

    方法一: html: <div id="all1"><div id="left1">1</div><div id=&q ...

  2. 子元素padding一般不会撑开父元素盒子大小

    padding影响盒子实际大小. (盒子即使有了宽度和高度,此时在指定内边框,会撑大盒子) 如果不指定宽度,块元素随父元素的宽度. 如果子元素不设置宽度或者高度,则子元素的padding值永远不会超出 ...

  3. 子元素宽度如何撑开父元素宽度

    子元素宽度如何撑开父元素宽度 代码 效果如下 一个横向滚动栏,子元素高度会自动撑开父元素的高度,但是好像子元素宽度不能自动撑开父元素的宽度.这是我们需要使用css使子元素宽度可以自动撑开父元素宽度,避 ...

  4. 子元素定位后,无法撑开父元素

    我们经常会遇到一个问题那就是在对子元素进行定位以后,就无法撑开父级元素,这时候我们可以给父级元素加一个属性overflow: hidden;或者overflow: auto;或者float:right ...

  5. CSS:当子元素皆浮动,撑开父元素的3种方式

    1. 在子元素后面补充同级的空元素,并定义清除浮动样式 html文件 <main><div><span>肥水东流无尽期.当初不合种相思.梦中未比丹青见,暗里忽惊山鸟 ...

  6. 子元素自动撑开父元素空间

    宽度 width !注意: 如果一个元素不添加width 属性,默认属性值为auto,不同的元素浏览器会根据其特点自动计算出实际宽度. 块级元素,其 width 属性的值会自动撑满父元素的 width ...

  7. html的绝对定位脱离文档流吗,子元素position:absolute定位之后脱离文档流,怎么使子元素撑开父元素...

    纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. test .o ...

  8. 微信小程序 CSS 解决子元素图片在父元素div宽高小的时候超出div范围

    今天写小程序的时候发现了这么个问题,在div内添加了图片,给div一个边框,然后我就发现我的图片不在div的范围内了,而是向下偏移了一点 html: <view class="tel& ...

  9. 如何解决flex:1撑开父元素问题

    开发过程中很多时候需要一个区域自动撑开,并且在刚好撑开的区域内实现滚动,这时用flex:1去做.但实际效果很多时候会出现区域撑的过大,却没有滚动效果. 要实现4自动撑满剩余空间,并且里面的内容超出时滚 ...

最新文章

  1. Linux Systemcall Int0x80方式、Sysenter/Sysexit Difference Comparation
  2. mySQL 教程 第2章 安装和介绍mySQL
  3. dj电商-需求分析开始-静态资源-用户模块
  4. 创新工场面试题——输出螺旋矩阵
  5. [转载] python 1
  6. axios 上传文件 封装_axios 封装【满足常规数据上传及file上传】
  7. ASP.NET profile之 找不到存储过程'dbo.aspnet_CheckSchemaVersion'
  8. MATLAB神经网络工具箱学习
  9. 单片机c语言程序设计软件下载,《手把手教你学单片机C程序设计》PDF免费版下载...
  10. 版本Android型号vivo 6D版,vivox6d和x6a参数
  11. 台式计算机设备验收单,电脑设备验收单.doc
  12. 如何使用JSZip(How to use JSZip)
  13. FastDFS原理及入门
  14. MT7658芯片组资料,MT7658处理器参数介绍
  15. 哈利波特魔法游戏(原创)
  16. 天图投资冲刺港股:资产管理规模249亿 投了小红书与奈雪
  17. 目标检测第5步-使用keras版YOLOv3训练
  18. 成果分享:边缘智能视频预取和缓存机制
  19. 什么是码元?什么是比特?
  20. USB Type-C引脚解析 CC、DFP、UFP、DRP用途解析【转】

热门文章

  1. 优秀的机器人(JAVA)
  2. ps2023如何导出svg
  3. 阿里的数据中台正在背离初心
  4. 天创速盈:如何成功打造爆单商品?
  5. 基于信捷HMI和西门子S7-1200的TCP通信解析
  6. 51单片机如何跳出wile循环_信用卡还最低、以卡养卡、乱分期,这种“死循环”如何跳出?...
  7. 分布式多进程加速DQN算法
  8. OpenCV实现动态人脸识别(第四讲)
  9. 德睿会议预约系统--运用在锦天城律师事务所
  10. 电子科学与技术毕设题目集合