子元素浮动导致父元素高度塌陷的解决方法

最新推荐文章于 2024-04-18 20:33:02 发布
最新推荐文章于 2024-04-18 20:33:02 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44686225/article/details/88956232
版权

子元素浮动会导致子元素脱离正常的文档流,所以会导致父元素塌陷,解决方法如下
1.为父元素添加固定高度,这样做的话如果子元素比较高的话一样会超出去
2.为父元素添加position:absolute属性,使父元素一样脱离文档流
3.为父元素添加.clearfix类,类写法如下

.clearfix::after{
display:block;
content:’’;
height:0;
clear:both;
}
在父类后面添加一个块元素,没有内容 高度为零,清除左右浮动

4.在父元素下方添加一个div:<div style:“clear:both;”>用于清除上方的所有浮动,这种方法和第三种方法的意思差不多
5.为父元素添加overflow:hidden属性

coderzyc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
父元素的高度为0利用伪元素:after清除浮动可解决问题
09-25
当一个父元素内的所有子元素都设置了浮动，如果没有指定父元素的高度，那么父元素的高度会自动塌缩到0，因为它不再包含这些浮动的子元素。这可能导致父元素背景颜色、边框等无法正确显示，甚至影响到页面其他部分的...
高度塌陷的产生条件和解决方法
02-23
虽然这种方法可以解决高度塌陷问题，但是由于让父元素浮动，可能会影响你的整个布局。 6. 让父元素转为表 我们可以给父元素声明 display：table；来解决高度塌陷问题，例如： ``` .father { width: 600px; ...
浮动造成父级高度塌陷及其解决办法
weixin_46421045的博客
03-14 179
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} .txt{ height:100px; background: pin...
CSS里设置子元素浮动导致父元素高度塌陷的解决办法（清除浮动）
weixin_44341110的博客
04-25 666
一、未设置子元素浮动的效果。 <!DOCTYPE html> <html lang="en"> <head> <style> .box{ background-color:red; width:100%; } .box1{ width:50%; height:200px; background-color:blue; text-align:center; line-height:200px; font-size:
web前端之绝对定位父元素高度塌陷问题、接近完美的跑马灯、巧妙的计算速度、走马灯动画、文本滚动、清除浮动、相对定位、四舍五入、流水灯、坍塌、absolute
最新发布
04-18 1339
web前端之绝对定位父元素高度塌陷问题、接近完美的跑马灯、巧妙的计算速度、走马灯动画、文本滚动、清除浮动、相对定位、四舍五入、流水灯、坍塌、absolute
CSS 子元素浮动，父元素高度塌陷解决办法
wyc135的博客
09-12 406
CSS 子元素浮动，父元素高度塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .wrapper{ border:1px solid red; } .content{ float:left; width:100px; height:100p
img填满父元素
10-08 1522
当给父元素设置relative属性，display为block，设置一个padding-top值，给子元素img设置absolute，top为0，left为0，width100%，height100%，img元素就会填满父元素，高度为padding； 元素的margin和padding的百分比 是根据父元素的width来的 :before伪类的margin和padding百分...
子元素浮动造成父元素坍塌的原因分析和解决方法
BilyChann的博客
04-04 1227
产生坍塌现象，分析原因，提出解决方法
css高度塌陷问题的解决方案
11-21
此时，将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。 所以在开发中一定要避免出现高度塌陷的问题。 <...
什么是高度塌陷 以及高度塌陷的解决办法
01-08
当父元素高度自适应，子元素浮动后，造成父元素高度为0，称为高度塌陷。 高度塌陷怎么解决？ 方法一：给父元素一个固定的高度 缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。 方法二：给父...
浅谈CSS 高度塌陷问题
09-22
在网页布局设计中，CSS高度塌陷是一个常见的问题，它发生在父元素没有设置固定高度，而其内部的浮动子元素又导致父元素无法根据子元素高度自适应时。这个问题的核心在于，当子元素设置了浮动（如`float:left`或`...
CSS中子元素浮动导致父元素高度塌陷解决方案
liuliuliu_666的博客
04-27 4748
float的定义： 定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级元素，而不论它本身是何种元素。元素对象设置了float属性之后，它将不再独自占据一行。浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。  为什么父元素会坍塌？ 这是因为内部的DI
css 子absolute导致父高度塌陷问题
树上骑个猴的博客
01-11 911
网上其他方法都是清除浮动的，解决absolute的塌陷问题，发现只有以下这种js有效 <body> <div class="container" id="container"> <div class="box" id="box" ></div> </div> <script> //拿到子元素的高度 var box=d
【css】子元素浮动到了父元素外，父元素没有随子元素自适应高度，如何解决？...
weixin_30345577的博客
11-20 687
正常情况 如果子元素没有设置浮动（float），父元素的高度会随着子元素高度的改变而改变的。 设置浮动以后 父元素的高度不会随着子元素的高度而变化。 例如：在一个ul中定义若干个li，并设置float='left' <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
解决浮动引起的父元素高度塌陷
q354636996的博客
09-01 256
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; #nav{ backgro
absolute导致高度塌陷
weixin_56006480的博客
05-23 1601
首先，通过querySelector方法获取到父元素和子元素的DOM节点，然后使用offsetHeight属性获取子元素的高度，将其赋值给父元素的高度。需要注意的是，使用相对定位和绝对定位时，子元素的定位是相对于最近的已定位祖先元素，如果没有已定位祖先元素，则相对于文档根元素。4.可以通过JS来获取子元素的高度，并将其赋值给父元素的高度，从而避免绝对定位元素导致的高度塌陷问题。属性会使元素脱离文档流，并不再占据原来的空间，从而导致父元素高度塌陷的问题。属性，可以让子元素相对于父元素的顶部对齐。
子元素浮动,父元素高度发生塌陷
weixin_45321331的博客
11-16 572
子盒子高度于父盒子高度的关系子盒子影响父盒子的高度浮动的盒子不会撑开父盒子的高度解决方案方法1:方法2: 子盒子影响父盒子的高度 在开发过程中,由于不方便给父元素高度,导致父元素没有高度,但是可以通过给子元素高度,从而子元素高度撑开父盒子的高度,也让父盒子有了高度,这样父盒子的高度就会自适应。 案列 案例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
子元素absolute定位时父元素有无relative的区别
Win32FanEx 的专栏
11-02 1655
原文：https://blog.csdn.net/Efficiency9/article/details/72630347 .father{ width: 200px; height: 200px; background-color: red; margin:0 auto; ...
解决高度塌陷问题1(子元素浮动，父元素高度塌陷)
liuwenjie_的博客
09-18 386
正常显示： <div class="parent"> safasdasd <div class="child">aaa</div> </div> .parent { height: 400px; width: 400px; background-color: blue; /* overflow:hidden*/ } .child { he
css的float高度塌陷解决
05-05
当使用 float 属性时，元素会从文档的正常流中脱离，导致父元素的高度无法被子元素撑开，从而产生高度塌陷的问题。解决方法有以下几种： 1. 使用 clear 属性清除浮动：在父元素的最后一个子元素后添加一个空的 div 元素，并设置 clear 属性为 both。 ``` <div style="clear: both;"></div> ``` 2. 使用 overflow 属性自动撑开高度：在父元素中添加 overflow 属性，并设置值为 auto 或 hidden。 ``` .parent { overflow: auto; } ``` 3. 使用伪元素清除浮动：在父元素中添加一个伪元素，然后清除浮动。 ``` .parent::after { content: ""; display: table; clear: both; } ``` 需要注意的是，以上方法都需要给父元素设置高度，否则父元素的高度仍然会塌陷。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值