高度塌陷

一般情况下,我们不会给父元素设置指定的高度,都是让他被内容撑开的。如果我们给子元素设置浮动,子元素会脱离文档流。一旦元素脱离文档流了,子元素就不能再撑开父元素的高度了,导致父元素的高度丢失,而且会导致页面布局混乱,这就叫高度塌陷。

解决高度塌陷方法一

给父元素设置固定高度,但这种方式不推荐使用

<style type="text/css">.outer {border: 10px red solid;height: 100px;}.inner {width: 100px;height: 100px;background-color: blue;float: left;}.box3 {height: 100px;background-color: yellow;}</style></head><body><div class="outer"><div class="inner"></div></div><div class="box3"></div></body>

解决高度塌陷方法二

给元素开启隐含属性BFC(块级格式化上下文),一旦元素开启隐含属性BFC后
元素就具有一些独有的特点,这些特点可以解决一些问题,其中就包括高度塌陷
1、开启BFC后,元素具有哪些特点?
(1)、父子外边距就不会重叠了(解决父子外边距重叠的问题)
(2)、开启BFC的元素就不会被浮动元素所覆盖
(3)、开启BFC的元素可以包裹住浮动的元素(解决高度塌陷问题)

2、如何开启BFC属性
(1)、设置overflow样式,样式值只要是非visible
也就是说可以设置hideen,auto,scroll等
其中hideen是副作用最小(推荐使用)
(2)、设置元素浮动(不推荐)
确实可以解决父元素高度丢失的问题,但也会带来一些新问题,父元素也会脱离文档流,
页面布局依然会混乱,而且父元素的宽度也会丢失
(3)、将元素转成行内块元素(不推荐)
可以解决父元素高度丢失的问题,但也带来一些新问题,父元素的宽度丢失了,
而且三像素也出现
(4)、将元素设置绝对定位 position: absolute;(不推荐)
确实可以解决父元素高度丢失的问题,但也会带来一些新问题,父元素也会脱离文档流,
页面布局依然会混乱,而且父元素的宽度也会丢失

<style type="text/css">.outer {border: 10px red solid;height: 100px;/* 开启BFC */overflow: scroll;display: inline-block;position: absolute;}.inner {width: 100px;height: 100px;background-color: blue;float: left;}.box3 {height: 100px;background-color: yellow;}</style></head><body><div class="outer"><div class="inner"></div></div><div class="box3"></div></body>

解决高度塌陷方法三

在浮动子元素的下方设置一个空的块元素,然后借助clear属性来消除浮动元素对空的块元素的浮动影响。缺点:在结构里面多了一个空的块元素。

<style type="text/css">.box1 {border: 10px solid red;}.box2 {width: 100px;height: 100px;background-color: blue;float: left;}.box3{height: 100px;background-color: yellow;}.box4{clear: both;}</style></head><body><div class="box1"><div class="box2">box2</div><!-- 空的块元素 --><div class="box4"></div></div><div class="box3"></div></body>

解决高度塌陷问题方法四

结合伪类after以及clear来解决
       通过伪类after,在元素的后面添加内容,将这个内容转成块元素,再清除其他浮动元素对这个块元素的浮动影响。
       一般情况下,我们会给这个写法单独设置一个类名,哪里需要解决高度塌陷问题,就给对应的位置添加类名,这种方式也是最常用的解决高度塌陷问题的方法。

<style type="text/css">.box1 {border: 10px solid red;}.clearfix::after{/* 添加的元素不会独占一行 */content: '';/* 将添加的元素转成块元素 */display: block;/* 清除浮动元素对空的块元素的影响 */clear: both;}.box2 {width: 100px;height: 100px;background-color: blue;float: left;}</style></head><body><div class="box1 clearfix"><div class="box2"></div></div><p class="p1 clearfix"><div class="p2"></div></p></body>

html高度塌陷问题相关推荐

  1. css 子元素设置float,父元素高度塌陷

    以div元素为例.div元素的高度会通过内容自动撑开.也就是说,内容有多少,高度就有多高.但是当内部元素设置了float属性之后,会是父元素高度塌陷 <div class="conta ...

  2. HTML-完美解决父子元素的外边距重叠和高度塌陷问题

    HTML-完美解决父子元素的外边距重叠和高度塌陷问题 参考文章: (1)HTML-完美解决父子元素的外边距重叠和高度塌陷问题 (2)https://www.cnblogs.com/hack-ing/p ...

  3. 解决父级元素高度塌陷问题的方法

    解决父级元素高度塌陷问题的方法 参考文章: (1)解决父级元素高度塌陷问题的方法 (2)https://www.cnblogs.com/anxiaobei/p/3905187.html 备忘一下.

  4. html高度塌陷问题解决

    html高度塌陷问题解决 参考文章: (1)html高度塌陷问题解决 (2)https://www.cnblogs.com/devilgod/p/9660314.html 备忘一下.

  5. CSS高度塌陷问题-清除浮动

    对于一个元素来说,如果他设置了浮动,则就会转化为块元素类型,可以设置width,height等.但是浮动会使元素脱离正常文档流,如果浮动元素的高度大于父元素的高度,则会使得浮动元素脱离父元素,也就是我 ...

  6. css 高度塌陷_HTML+CSS入门 HTML高度塌陷以及定位详解

    本篇教程介绍了HTML+CSS入门 HTML高度塌陷以及定位详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲 ...

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

    同学们在进行页面布局的时候,经常会使用到float浮动进行样式控制,但如果我们没有设置父元素的高度的时候使用浮动就会导致后面的子元素出现问题,也就是高度塌陷.下面小千就给大家介绍几种常见的解决CSS高 ...

  8. 【小记】-006--关于高度塌陷的问题

    最近遇到一个问题:当使用 position:absolute 时,给父元素添加 position:relative 父元素高度塌陷,此时如何使得父元素的高度被子元素撑开? 我了解到的高度塌陷无非就是: ...

  9. HTML浮动导致高度塌陷,HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)...

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  10. css 高度塌陷_web前端入门到实战:CSS 负边距的行为表现

    CSS 中的负边距 margin 是可以设置为负值的,这会帮你实现靠近顶部/左边相邻元素的效果,或者实现靠近底部/右边相邻元素的效果. 先介绍下我们的测试元素:一个简单的包含三个段落的容器元素.注意, ...

最新文章

  1. IE6左右边框断线现象
  2. 细说php--php学习必备
  3. wubantu18.04版,pycharm2.18.3.2永久破解来了,借鉴个位大神的教程破掉的,感谢各位大佬...
  4. Ubuntu14.04安装redis和简单配置
  5. 均值极差图控制上下限_SPC之I-MR控制图
  6. ME3630模块常用指令介绍
  7. 1.4 @SuppressWarnings:抑制编译器警告
  8. Android APK文件学习调研
  9. 18、Java并发性和多线程-饥饿与公平
  10. linux刻录win10u盘_手把手教你装系统之【制作官方win10安装U盘】
  11. 年轻人的“第一次”寄快递?上有产品下有电商的小米注册快递商标
  12. 十大经典排序算法3(Python版本)
  13. jQuery lightbox插件(相册全屏效果)
  14. 数据挖掘应用实例分析
  15. 【翻译】Java 面向对象编程基本概念
  16. 【数字信号调制】基于ASK+OOK+BPSK+8PSK+QPSK+AM多种算法实现信号调制解调含Matlab源码
  17. SpringBoot Web开发
  18. 数理统计10.15 | 幂律分布
  19. 5-TDengine集成SpringBoot,MyBatis,MyBatisPlus
  20. Elasticsearch集群类型和选举策略

热门文章

  1. error C2065: ‘salary‘ : undeclared identifier
  2. 指针、堆栈(DAY 26)
  3. android 日历考勤管理,android studio中使用recyclerview制作个显示考勤打卡的日历来...
  4. tomcat连接以及HTTP协议
  5. opencv 边缘检测,角点检测
  6. firewall ip白名单设置
  7. border每个边框的阴影(box-shadow属性)
  8. 外包也开始卷起来了???
  9. 我们对区块链游戏的期望太高了
  10. 搭建个人内网穿透服务