元素塌陷问题

最新推荐文章于 2023-12-19 18:02:15 发布

原创最新推荐文章于 2023-12-19 18:02:15 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html5

造成原因：子元素浮动脱离文档流，没有东西支撑父级，父级高度为零

解决：

1.如果父级元素高度是固定的，那就把他的高度写死

2.给父级元素设置float,让他跟子元素一起浮动

3.在最后一个浮动的元素后加一个空的div，清除浮动。<div style="clear:both"></div>

4.父元素设置overflow:hidden

5.使用after伪对象清除.clearfix:after{clear:both;display:block;content:"";height:0;}（在父容器结尾放一个空白字符，使他不显示出来，并且是非浮动的独立区块）

但是IE8以上和非IE浏览器才支持添加zoom:1就可以了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_43962020

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

xiaoxijinger的博客

07-05

832

同学们在进行页面布局的时候，经常会使用到float浮动进行样式控制，但如果我们没有设置父元素的高度的时候使用浮动就会导致后面的子元素出现问题，也就是高度塌陷。下面小千就给大家介绍几种常见的解决CSS高度塌陷的方法。 1.父级div定义 height 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题建议：不推荐使用，只建议高度固定的布局时使用 2.结尾处加

CSS:元素塌陷问题

weixin_33842304的博客

03-01

642

2019独角兽企业重金招聘Python工程师标准>>> ...

参与评论您还未登录，请先登录后发表或查看评论

元素坍塌

guitarist0505的博客

04-04

309

所谓父元素高度坍塌是指：当父元素没有设置高度而子元素设置高度，在子元素没有设置浮动的情况下，此时父元素因为包含子元素，也具有了高度，而当子元素设置浮动后，因为脱离了文档标准流，父元素不具有高度了（这应该就是元素崩塌）。塌陷具有零高度的意思应该是：没有height值，子元素又是浮起来的，那么后面再来个div2的话就会占用div1的位置，当然div1浮动的子元素会飘在div2上面，这样会对布局有影响，...

关于元素塌陷的问题

proxy_的博客

07-10

683

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...

css元素塌陷

weixin_45695200的博客

09-08

224

内部元素设置了浮动（float）导致外部父元素无法被撑开，从而就坍塌了。 <div class="d"> <div class="a"></div> <div class="b"></div>  </div> .d { border: 1px solid red; } .a,.b { width: 100px; he

HTML元素塌陷及解决方法

然后他就拿棍子来打我

12-19

768

利用伪类来清除浮动，不会影响任何其他样式

块元素塌陷问题解决方案

才不是小弱鸡的博客

09-21

471

0x00 嵌套块元素塌陷问题复现首先是基础代码 <body> <div class="father"> <div class="son"> </div> </div> </body> <style> .father { width: 400px; height: 400px; background-color: black; } .son { width: 200px...

解决元素塌陷的方法

wanzizhe的博客

11-06

1385

元素塌陷问题：子元素脱离文档流，父元素无高度为元素塌陷问题解决方法： 1.

盘点解决父级塌陷问题（父元素坍塌问题）五种解决方法！！！！

LovelyHeart的博客

08-01

4399

解决父级塌陷问题（父元素坍塌问题）五种解决方法

前端知识小节-解决浮动带来的元素塌陷问题

Mr.chen的博客

03-14

307

在编写代码的初期我们会发现子元素在浮动后父元素会因为没有元素支撑而高变为0，产生元素塌陷，这样就对后边的页面书写带来一些麻烦，例如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&a

解决父元素塌陷的问题

whr

06-03

2622

父元素塌陷的定义：

[面试常考]父元素高度坍塌的原因及其解决方法

weixin_48047636的博客

07-20

269

width500px;height300px;width100px;height100px;floatleft;width100px;height100px;没浮动之前是这样的child1浮动到左边,由于浮动造成脱离文档流,脱离文档流造成空间释放,这样就导致child2跑到child1的位置,child1覆盖了child2。...

【CSS】从外边距塌陷引出——BFC 是什么？

sparks42的博客

09-18

719

举个例子：父级和子级之间，给子级上边的外边距，父级会跟着子级下来 <div class="dad"><div class="son"></div></div> .dad { width: 100px; height: 100px; background: red; border-top:1px solid; /* 这句不加就会塌陷 */ } .son { width: 50px; height: 50px; margin

margin塌陷

m0_47613744的博客

07-12

420

两个同级元素，垂直排列。上面的盒子给了margin-bottom，下面的盒子给了margin-top，这两个边距会重叠，会按照两者中较大的值来计算。两个父子元素，内部的子盒子给了margin-top，父元素也会受到影响，同时产生上边距，也就是父子重合（粘连）。当父元素的高度设置为auto或不写，同时内部子元素设置了浮动属性时，父元素的高度会发生自身塌陷。1、内部子元素不使用浮动属性，可以使用display将子元素设置为内联块；2、使用父元素的padding-top替代子元素的margin-top;

css塌陷是怎么产生的？怎么解决塌陷？

weixin_42560424的博客

02-06

867

css塌陷一般分为高度塌陷和外边距塌陷两种。 1. 高度塌陷：原因是父元素没有设置高度，子元素设置浮动属性之后，父元素的高度为0。

CSS外边距合并（塌陷）和解决方法

weixin_72322475的博客

07-11

2110

总结并举例论证了外边距合并（塌陷）的相关情况和解决方法

清除浮动的方式

weixin_43850586的博客

11-15

182

高度塌陷：当所有子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。清除浮动方式：给父元素单独定义高度优点：快速简单，代码少缺点：无法进行响应式布局父元素定义overflow:hidden；zoom：1（针对IE6兼容）优点：简单快速，代码少缺点：超出部分被隐藏，布局时候要注意在浮动的元素后面加一个空标签，clear:both;height:0;overflow:hidden 优点：简单快速，代码少，兼容性高缺点：增加空标签，不利于页面优化父元素定义 overflow:

解决元素塌陷，清除浮动

讨厌写代码

09-14

456

浮动塌陷的解决方案

css元素塌陷问题解决方案

05-25

CSS元素塌陷问题是指当一个父元素包含了一些浮动的子元素，并且这些子元素的高度超过了父元素的高度时，父元素的高度将会塌陷，导致页面布局出现问题。解决这个问题的方法有多种，下面列举两种常用的方法： 1. 使用清除浮动的技巧：在父元素的末尾添加一个空的块元素（如div）并设置clear属性为both。这样可以清除浮动，使父元素的高度包含所有子元素的高度。 ```html <div class="parent"> <div class="child float-left"></div> <div class="child float-left"></div> <div class="clear"></div> </div> <style> .float-left { float: left; } .clear { clear: both; } </style> ``` 2. 使用Flex布局：使用Flex布局可以让父元素自适应子元素的高度，从而解决元素塌陷的问题。 ```html <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <style> .parent { display: flex; flex-wrap: wrap; } .child { flex-basis: 50%; } </style> ``` 以上两种方法均能有效解决元素塌陷的问题，具体使用哪种方法取决于实际情况。