CSS 解决父级边框塌陷问题的四种解决办法

已于 2022-10-17 12:57:04 修改
阅读量2.8k 收藏 17
点赞数 7
分类专栏： HTML+CSS 文章标签： css css3 html
于 2022-05-14 15:00:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68548138/article/details/124767982
版权

文章目录


在这里插入图片描述

1.通过设置父元素的高度解决父级边框塌陷

弊端
高度不好把控
元素固定高度会降低扩展性

<html>
    <head>
        <title>浮动</title>
        <style>
        	div{
			    margin: 10px;
			    padding: 5px;
			}
			#father{
			    /* 方法一:加高height */
			    height: 400px;
			    border: 1px #000 solid;
			}
			.layer01{
			    border: 1px #f00 dashed;
			    float: left;
			}
			.layer02{
			    border: 1px #00f dashed;
			    float: left;
			}
			.layer03{
			    border: 1px #060 dashed;
			    float: right;
			}
			.layer04{
			    border: 1px #666 dashed;
			    font-size: 12px;
			    line-height: 23px;
			    clear: both ; 
			    float: left;
			}
        </style>
    </head>
    <body>
        <div id="father" class="clear"</div>
            <div class="layer01"><img src="imge/1.png" alt=""></div>
            <div class="layer02"><img src="imge/2.png" alt=""></div>
            <div class="layer03"><img src="imge/3.png" alt=""></div>
            <div class="layer04">
                浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止.本网页中共有三个图片,分别代表块元素一 块元素二 块元素三 
                这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div块元素分别向左浮动 向右浮动 或者不浮动.
            </div>
        </div>
    </body>
</html>

2.通过浮动元素后加空白div解决父级边框塌陷

<html>
    <head>
        <title>浮动</title>
        <style>
        	div{
			    margin: 10px;
			    padding: 5px;
			}
			#father{
			   border: 1px #000 solid;
			}
			.layer01{
			    border: 1px #f00 dashed;
			    float: left;
			}
			.layer02{
			    border: 1px #00f dashed;
			    float: left;
			}
			.layer03{
			    border: 1px #060 dashed;
			    float: right;
			}
			.layer04{
			    border: 1px #666 dashed;
			    font-size: 12px;
			    line-height: 23px;
			    clear: both ; 
			    float: left;
			}
			/* 方法二: 加空白div*/
			.layer05{
			   clear: both;
			}
        </style>
    </head>
    <body>
        <div id="father" class="clear"</div>
            <div class="layer01"><img src="imge/1.png" alt=""></div>
            <div class="layer02"><img src="imge/2.png" alt=""></div>
            <div class="layer03"><img src="imge/3.png" alt=""></div>
            <div class="layer04">
                浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止.本网页中共有三个图片,分别代表块元素一 块元素二 块元素三 
                这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div块元素分别向左浮动 向右浮动 或者不浮动.
            </div>
            <div class="layer05"></div>
        </div>
    </body>
</html>

弊端

如果需要多个空白div,容易造成html标签冗余

3.通过after伪类实现解决父级边框塌陷

页面结构不动只在clear类后面添加after伪类，内容为空；把添加的内容转化为块元素，清除这个元素两边的浮动。写法稍微复杂一点,但是没有副作用，推荐使用。

<html>
    <head>
        <title>浮动</title>
        <style>
        	div{
			    margin: 10px;
			    padding: 5px;
			}
			#father{
			    border: 1px #000 solid;
			}
			.layer01{
			    border: 1px #f00 dashed;
			    float: left;
			}
			.layer02{
			    border: 1px #00f dashed;
			    float: left;
			}
			.layer03{
			    border: 1px #060 dashed;
			    float: right;
			}
			.layer04{
			    border: 1px #666 dashed;
			    font-size: 12px;
			    line-height: 23px;
			    clear: both ; 
			    float: left;
			}
			/* 方式三:父级添加伪类after */
			.clear:after{
			    content: '';        /* 在clear类后面添加内容为空 */
			    display: block;     /* 把添加的内容转化为块元素 */
			    clear: both;        /* 清除这个元素两边的浮动 */
			} 
        </style>
    </head>
    <body>
        <div id="father" class="clear"</div>
            <div class="layer01"><img src="imge/1.png" alt=""></div>
            <div class="layer02"><img src="imge/2.png" alt=""></div>
            <div class="layer03"><img src="imge/3.png" alt=""></div>
            <div class="layer04">
                浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止.本网页中共有三个图片,分别代表块元素一 块元素二 块元素三 
                这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div块元素分别向左浮动 向右浮动 或者不浮动.
            </div>
        </div>
    </body>
</html>

4.通过为父级边框添加overflow属性现解决父级边框塌陷

overflow属性

属性值说明
visible默认值，内容不会被修剪，会呈现在盒子之外
hidden内容会被修剪，并且其余内容是不可见的
scroll内容会被修剪，但是浏览器会显示滚动条，以便查看其内容
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

弊端
下拉列表框的场景不能使用

<html>
    <head>
        <title>浮动</title>
        <style>
        	div{
			    margin: 10px;
			    padding: 5px;
			}
			#father{
				border: 1px #000 solid;
			    /* 方法四: 父级添加overflow属性 */
	   			 overflow: hidden;
			}
			.layer01{
			    border: 1px #f00 dashed;
			    float: left;
			}
			.layer02{
			    border: 1px #00f dashed;
			    float: left;
			}
			.layer03{
			    border: 1px #060 dashed;
			    float: right;
			}
			.layer04{
			    border: 1px #666 dashed;
			    font-size: 12px;
			    line-height: 23px;
			    clear: both ; 
			    float: left;
			}
        </style>
    </head>
    <body>
        <div id="father" class="clear"</div>
            <div class="layer01"><img src="imge/1.png" alt=""></div>
            <div class="layer02"><img src="imge/2.png" alt=""></div>
            <div class="layer03"><img src="imge/3.png" alt=""></div>
            <div class="layer04">
                浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止.本网页中共有三个图片,分别代表块元素一 块元素二 块元素三 
                这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div块元素分别向左浮动 向右浮动 或者不浮动.
            </div>
        </div>
    </body>
</html>
[微信紅包]恭喜发財，大吉大利！
关注
  • 7
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
css中关于父元素浮动塌陷的常用解决办法
01-08
清除父元素塌陷 1 2 3 4 5 第一种方法,设置父元素的宽高 #fatherDiv{ border: 1px solid red; width: 120px; height: 30px; } .sonDiv{ border: 1px solid black; width: 20px; height: 20px; line-height: 20px; text-align: cen
css高度塌陷问题的解决方案
11-21
所以在开发中一定要避免出现高度塌陷的问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">
CSS笔记 —— 浮动（父级边框塌陷问题的解决方法）
一纸春秋的博客
11-20 1313
目录display将span标签改为块级元素将div标签改成行内元素inline-block 让div标签保持着块级元素的特性，但是可以和行内元素在同一行浮动父级边框塌陷问题clear解决父级边框塌陷问题的方法方法一在div里面再套一个div，这个div用来清除左右浮动的元素方法三方法四，利用伪元素解决 display 首先来给出一个块级元素，一个行级元素 <!DOCTYPE html> <html lang="en"> <head> <meta chars
怎么解决父元素引起的高度坍塌？
最新发布
zybijiso666的博客
03-24 440
父元素高度坍塌通常是由于其内部的子元素使用了浮动（float）或绝对定位（absolute positioning）等属性导致的。这些属性会使子元素脱离文档流，从而导致父元素无法正确计算高度，从而造成高度坍塌。通过以上方法中的任何一种，您应该能够有效地解决父元素高度坍塌的问题。根据具体情况选择最适合的方法来解决您遇到的问题。：将父元素设置为相对定位（relative positioning）也可以解决高度坍塌的问题。
盘点解决父级塌陷问题（父元素坍塌问题）五种解决方法！！！！
LovelyHeart的博客
08-01 3267
解决父级塌陷问题（父元素坍塌问题）五种解决方法
浮动属性之解决父级边框塌陷以及overflow属性的使用
m0_59717262的博客
06-25 383
主要讲解如何解决父级边框塌陷的问题，顺便讲解了overflow元素的使用。
前端基础——css中的高度塌陷问题
deartors的博客
10-18 150
高度塌陷， ：实际上还是布局的问题，就像之前介绍过的二级菜单栏设计，当前布局下如果加其他东西就会出现问题，俗称bug。 解决当前bug就要先引入伪元素；
CSS中清除外边框塌陷的4种方式
怕什么真理无穷，进一寸有一寸的欢喜。即使开了一辆老掉牙的破车，只要在前行就好，偶尔吹点小风，这就是幸
01-12 870
1：直接在外边框中把height属性值调大 2：在外边框的尾部加一个div标签，style设置成clear：both； 3：在外边框中加一个属性overflow：hidden。 4：使用结构伪类选择器：外边框：after，然后设置content："", display:block; clear:both; 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-13 1232
一、外边距塌陷描述 1、没有塌陷的情况 2、外边距塌陷情况 二、传统方法解决外边距塌陷 - 为父容器 / 子元素设置内边距 / 边框 三、使用浮动解决外边距塌陷 - 为子元素设置浮动 四、使用绝对定位解决外边距塌陷 - 为子元素设置绝对定位
css 解决表格边框不显示的问题
12-09
下面有一个例子，看如下代码，有两处不能显示，有一种解决办法是加个空格，可以解决但不是最理想的。其实只要在表格中加了一句代码就可以。 style="border-collapse: collapse" 复制代码代码如下: ”1″ width=”...
用div+css解决出现水平滚动条问题
10-30
"用div+css解决出现水平滚动条问题" 在 Web 开发中，水平滚动条的出现是一个常见的问题，特别是在使用 div + CSS 布局时。今天，我们将讨论如何使用 div + CSS 解决出现水平滚动条问题。 问题分析 在上面的代码中...
CSS BUG问题解决的一些经验
09-27
网页制作Webjx文章简介：CSS BUG在webjx.com介绍过也很多，也一直困扰着大家，在CSS布局中会常遇到这样的问题。相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap（3px bug）、IE5/6 ...
reset.css引入以及1px边框问题的解决方法
09-22
本文将详细讨论`reset.css`的引入以及1px边框问题的解决方案。 一、关于`reset.css` `reset.css`的目的是消除HTML元素之间的样式差异，如字体大小、内边距、外边距等。由于不同的浏览器对这些元素有不同的默认样式...
详解CSS盒子塌陷的5种解决方法
12-14
一，盒子塌陷是什么？...三，关于盒子塌陷的几种解决方法 最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及
逆战班：CSS高度塌陷及解决办法.html
03-03
针对CSS中高度塌陷的问题进行描述，并给出了多种解决办法，跟给出了适合任何环境的万能清除法。可以建立统一适用的公共样式表，方便以后进行使用
使用CSS解决文字环绕图片问题的代码
10-30
使用CSS解决文字环绕图片问题的代码
CSS样式常见问题：父元素下移，父元素高度塌陷，居中对齐，元素隐藏
weixin_48480995的博客
02-25 466
CSS样式常见问题：父元素下移，父元素高度塌陷，居中对齐，元素隐藏
怎么解决父元素高度塌陷
qq_45814648的博客
02-03 208
首先我们说一个 CSS 的概念——BFC 块级格式上下文，简单来说就是只要样式或方法触发了 BFC 就可以防止高度塌陷。缺点：影响整体页面布局，若父元素也有父元素呢？总不能一直浮动到 body 吧？缺点：添加了无意义标签，不易于后期维护，违背了结构和表现分离的标准。给父元素添加一个类，来添加一个看不见的块元素，以实现清除浮动。优点：通俗易懂，易于掌握。
CSS中的塌陷问题
weixin_46372993的博客
01-07 1127
学习前端的小伙伴是否经常能碰到在设置两个盒子与盒子之间边距的时候，明明上下外边距都设置了，但最终的外边距却不是他们两者之和呢？而是其中的最大的外边距值呢？下面我们一起来看看到底发生了什么，莱斯狗~~添加定位，子绝父相改变标签显示模式，转行内块，父或子都行添加浮动，父或子都行给子级添加相对定位，通过方位属性进行移动，但需要注意此时的父级与兄弟盒子仍然存在塌陷问题给父级添加溢出隐藏，触发BFC也是可以取消塌陷效果的给父级添加内边距（可设置自动内减保持盒子原来大小）给父级设置边框。
css 浮动父级塌陷
10-13
CSS浮动会导致父级元素高度塌陷的问题，解决方法有多种，其中一种是使用clearfix清除浮动。 clearfix是一种清除浮动的技术，可以通过在父级元素上添加一个clearfix类来实现。具体实现方式如下： ``` .clearfix::after { content: ""; display: table; clear: both; } ``` 这样就可以解决浮动父级塌陷的问题了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

[微信紅包]恭喜发財，大吉大利！

你的鼓励将是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值