解决父元素高度塌陷

最新推荐文章于 2024-03-24 12:38:43 发布
原创 最新推荐文章于 2024-03-24 12:38:43 发布 · 277 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

方法一

开启BFC

box{
	overflow:hidden;
　　zoom:1;
}
  • zoom:1开启IE6的hasLayout
  • 开启BFC的方式有很多，我们记住overflow:hidden;就可以

方法二

使用伪元素撑开(推荐)

.clearfix{
　　zoom:1;
}

.clearfix:after{
　　content:'';
　　display:block;
　　height:0;
　　font-size:0;
　　clear:both;
　　overflow:hidden;
}
  • 在父元素标签上class="clearfix"就可以了

其他

通过定位导致的父元素塌陷，只能使用JS来解决

父元素高度塌陷的解决办法
m0_46382643的博客
03-02 3888
为什么要清除浮动？是因为浮动元素不再占用原文档流的位置，对后面的元素排版产生了影响，所以要在该元素中清除浮动。更准确的说，是为了清除元素浮动后的影响。 清除浮动的方法： 1：给父元素设置高度，如下图： 注：只适合高度固定的布局。 2：给父元素添加：overflow:hidden/auto/scroll都可以清除浮动，如下图： 注：内容增多时会造成不会自动换行，导致内容被隐藏，无法显示需要溢出的...
父元素高度塌陷解决问题
weixin_43514933的博客
10-24 412
父元素高度塌陷解决问题 方法1：额外标签法 在最后一个浮动标签后，新加一个标签，给其设置clear：both；（不推荐） 优点：通俗易懂，方便 缺点：添加无意义标签，语义化差 2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐） 通过触发BFC方式，实现清除浮动 优点：代码简洁 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素 3.使用after伪元素清除浮动（推荐使用） 优点：符合闭合浮动思想，结构语义化正确 缺点：ie6-7不支持伪元素：a
解决float带来的父元素高度塌陷问题
qq_21696621的博客
08-22 439
1.为父元素添加高度。缺陷：高度要随子元素所有高度变化而变化 2.clear属性。使用：在浮动元素的同级元素添加clear属性。缺陷：添加了多余标签 3.为父元素添加overflow:hidden;zoom:1属性。缺陷：overflow:hidden;会自动截取超出父元素宽度的内容 4.为父元素添加相应的float属性。缺陷：用于父元素浮动，所以其下的兄弟元素会发生位置异位（不使用浮动）。...
详解关于浮动元素float使其父元素高度塌陷的原因及解决方法
11-21
总的来说，浮动元素导致的父元素高度塌陷是CSS布局中的一个经典问题。通过理解浮动元素的特性，以及掌握上述的解决方法，开发者可以有效地处理这个问题，创建出稳定且符合预期的网页布局。在现代前端开发中，虽然有...
css中关于父元素浮动塌陷的常用解决办法
01-08
这个伪元素将创建一个新的块级格式化上下文，使得父元素能够包含所有浮动的子元素，从而解决高度塌陷的问题。 以上三种方法都可以有效地解决CSS中的父元素浮动塌陷问题，选择哪种方法取决于具体的设计需求和对代码...
绝对定位父元素高度塌陷
最新发布
06-24
我们正在解决一个CSS问题：绝对定位的子元素导致父元素高度塌陷。根据引用，高度塌陷通常发生在子元素浮动或绝对定位时，父元素无法正确计算高度。引用[2]明确提到绝对定位是导致高度塌陷的原因之一。绝对定位...
子元素绝对定位父元素高度塌陷
06-14
我们正在解决一个CSS问题：子元素使用绝对定位导致父元素高度塌陷的问题。根据引用内容，我们知道当子元素脱离文档流（无论是浮动还是绝对定位）时，父元素在计算高度时会忽略这些子元素，从而导致高度塌陷。引用[1]...
解决浮动引起的父元素高度塌陷
q354636996的博客
09-01 312
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #nav{ backgro
css解决浮动导致父元素高度坍塌的几种方法
11-21
以前布局经常会用到float进行布局，但是我们都知道使用浮动布局会存在一个问题-导致父元素高度坍塌 那我们一起来探究一下解决这个问题的方法！就先从文档流开始吧 一.定位的分类 普通流定位 浮动定位 相对定位 绝对定位 ①普通流定位 又称为默认文档流定位 1.每个元素在页面上都有自己的空间 2.每个元素都是从父元素的左上角开始渲染（显示） 3.块级元素按照从上到下逐个排列，每个元素单独成行 4.行内元素是多个元素在一行中显示，从左往右顺序排列，显示不下换行 ②浮动定位 让块级元素横向显示 float： 取值：left 让元素浮动后，在当前行停靠在父元素的左侧，
解决父元素塌陷问题
m0_64288219的博客
06-06 2341
我们期望的的结果实际结果通过结果我们不难发现，box1和box2同为块级元素，按标准文档流来，box2应该另起一行位于box1的下面一行，也就是位于子元素1和子元素2的下面。他们本来不应该有重叠的部分，但是box1和box2却跑到了子元素1和子元素所在区域的下面。造成这种状况的原因是父元素未设置高度，再加上子元素浮动导致父元素box1高度塌陷，父元素的高度无法把子元素包括在内。此时父元素高度为0，因为父元素未设置高度。这也导致box2仍然在box1高度为0的下面继续按标准文档流来布局，所以他们有了我们不期望
怎么解决父元素引起的高度坍塌？
zybijiso666的博客
03-24 700
父元素高度坍塌通常是由于其内部的子元素使用了浮动（float）或绝对定位（absolute positioning）等属性导致的。这些属性会使子元素脱离文档流，从而导致父元素无法正确计算高度，从而造成高度坍塌。通过以上方法中的任何一种，您应该能够有效地解决父元素高度坍塌的问题。根据具体情况选择最适合的方法来解决您遇到的问题。：将父元素设置为相对定位（relative positioning）也可以解决高度坍塌的问题。
解决父级元素高度塌陷问题的方法
asdfgh0077的博客
07-25 136
解决父级元素高度塌陷问题的方法
父元素高度塌陷
mutouren_abc的博客
12-17 249
浮动元素使其父元素高度塌陷 情况描述： 给一个元素设置浮动之后float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。 原因： 当元素设置浮动后，会自动脱离文档流，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况） 解决方法： .
父元素高度塌陷问题的解决方案
huangqiang80的博客
09-23 833
父元素高度塌陷问题的解决方案 在界面开发中，我们在布局的时候，很多情况下会给父元素的高度设置auto值，来自适应子元素高度。但是在子元素设置了浮动的情况下，就会出现父元素高度塌陷的问题。解决高度塌陷的方法有很多，但不同的方法多多少少都有一些副作用影响布局，现在介绍一种比较常用的副作用相对较少的解决方案。代码如下 css代码 //显示父元素 .box1{ border: 10px red solid; } .box2{ width:100px; height:100px; ba
盘点解决父级塌陷问题（父元素坍塌问题）五种解决方法！！！！
LovelyHeart的博客
08-01 4282
解决父级塌陷问题（父元素坍塌问题）五种解决方法
“父元素高度塌陷”问题
ajaj_xiaoxiaohei的博客
09-24 396
CSS中子元素浮动导致父元素高度塌陷解决方案
liuliuliu_666的博客
04-27 4845
float的定义： 定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级元素，而不论它本身是何种元素。元素对象设置了float属性之后，它将不再独自占据一行。浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。  为什么父元素会坍塌？ 这是因为内部的DI
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值