伪类解决top塌陷

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

本文探讨了在CSS布局中使用clearfix解决div嵌套时因子元素设置margin导致的top塌陷问题。通过给父类添加clearfix样式，可以有效避免布局下沉，保持页面结构的稳定性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

代码:

/* 约定俗称 */

.clearfix:before{

content: "";

display: table;

 

<div class="box clearfix">

<div class="son">

 

</div>

</div>

top塌陷说明:div嵌套使用,给子类设置margin,如果父类没有边界,就会下沉.

zaizai2108
关注
67_使用after伪元素解决高度塌陷问题
述安的博客
08-20 765
此时发现，由于box2浮动，box3的位置上移，然后就是box3的文字不会被浮动元素遮盖，这时候如果想办法将文字移到绿盒子的下边，则父元素会自动扩大高度以包裹文字，因为box3是块元素，没有浮动效果，那么一定会被父元素包住。如何将文字移到绿盒子下边呢，box3清除浮动就好了！ 由此可见，父元素的高度恢复，然而是由box3导致的，所以我们知道，只要在父元素的最后地方添加一个内容（这个内容可以是空白内容），那么父元素的高度就会撑起，无论子元素的高度多高，因为父元素始终得包裹住最后的空白内容，那么就可以无视子元
50使用after伪类解决高度塌陷问题
quanxiaobai_的博客
06-09 689
重现高度塌陷问题 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
2020-09-02（clear，after伪类解决高度塌陷，clearfix）
weixin_45433904的博客
09-02 322
1.clear 如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生影响 clear： 作用：清除浮动元素对当前元素所产生的影响 可选值： left：清除左侧浮动元素对当前元素的影响 right：清除右侧浮动元素对当前元素的影响 both：清除两侧中最大影响的那侧 原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响 2.after伪类解决高度塌陷 <!DOCTYPE html> <html lan
2.利用伪类after，清除元素高度的塌陷问题，亲测实用
k912120的博客
12-13 920
.clearfix{ zoom:1; } .clearfix:after{ content: ""; display: block; visibility: hidden; height: 0; clear: both; }  
外部容器出现塌陷现象（伪类after、before的使用）
weixin_30596343的博客
12-18 199
伪类after、before的使用 ::before//伪元素　　:hover//伪类 #all::after{ 　　display:table; 　　clear:both; 　　content:""; } #all::after:在all里面的最后添加一个虚拟的子元素after a:hover:带伪类别的a标签 转载于:https://www.cnblogs.com/lishen...
【HTML+CSS学习笔记】使用after伪类解决高度塌陷
m0_47746932的博客
09-30 247
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
margin-top塌陷问题的现象与解决的具体方法
09-22
**CSS中的Margin-Top塌陷现象** 在CSS布局中，`margin-top`塌陷是一种常见的问题，它发生在当一个块级元素（子元素）的顶部外边距与其包含块（父元素）相遇时，导致父元素的上边界不是按照预期与子元素的上边界保持...
外边距塌陷和margin-top失效问题及解决方案
bdh123b的博客
12-04 587
外边距塌陷 外边距塌陷是小白在写CSS最常遇见的问题，我们可以看一下下面的这个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
【CSS知识点】——解决高度塌陷以及BFC详解
m0_50785976的博客
10-29 380
高度塌陷以及BFC详解
css伪类选择器、盒子模型等
qq_65046523的博客
08-12 484
根据元素的结构关系查找元素查找第一个元素：标签名:first-child查找最后一个元素：标签名：last-child查找第n个元素：标签名：nth-child(n)
对flex布局的总结
qq_41865885的博客
10-23 289
flex布局就是给父级盒子设置display：flex，来改变子元素的排列方式。 flex布局中父级元素可以设置的属性 1.flex-directory 用来设置主轴的方向，然后子元素会跟着这个方向来排列，默认值是row行，也可以是column列。 2.justify-content 用来设置主轴上子元素的排列方式，默认值是flex-start，也可以是flex-end，这两个属性就是设置靠着哪边来排。 当值为center时，子元素会居中。 当值为space-around时，会完完全全的平均分配空间。（在主
【CSS笔记】高度塌陷、伪元素选择器及伪类选择器
吾昂王
05-28 370
高度塌陷： 父元素高度自适应，子元素 float 后，造成父元素高度为0解决高度塌陷： 1、个给高度塌陷的元素添加一个属性 overflow:hidden 触发了BFC，在计算BFC元素高度时，浮动元素也会参与计算 弊端：溢出隐藏 2、清除浮动 2.1、在高度塌陷的元素里面的最下面，添加一个空的<div></div> 2.2、给空的div加一个属性clear:b...
解决margin塌陷问题
qq_33840688的博客
07-15 319
什么是margin塌陷 在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个margin紧挨着，中间没有border或者padding margin直接接触，就产生了合并 表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象 解决margin塌陷的方法 1. 设置边框 2.overflow:hidden 溢出隐藏 3.name:before{content:''; display:table;}设
解决父级塌陷 加div 内容伪类
weixin_48407105的博客
09-14 219
加div .clear{clear：both;} <div class="clear"></div> 缺点： 直接加height在父级 麻烦 *{ border:0； padding:0; margin:0; } 对所有元素设定 overflow：visible; hidden; 隐藏 scroll; 会有滚动条 auto; 会有滚动条 如果父级无设定高度，hidden 由于无法读取谁溢出，默认无溢出 内容伪类 div::befor
margin-top塌陷问题的现象与解决
热门推荐
FreeSpider
05-26 1万+
margin-top塌陷问题 什么是margin-top塌陷 margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。 在未给子元素（绿色部分）添加margin-to...
CSS3属性之 target伪类实现Tab切换效果
weixin_30918633的博客
08-11 144
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target伪类实现Tab切换效果</title> <s...
margin-top 塌陷 的解决方案
binlety
08-06 302
    在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：     1、外部盒子设置一个边框   border      2、外部盒子设置 overflow:hidden      3、使用伪元素类：       .clearfix:before{       content: '';       display:...
解决高度塌陷问题——Clear属性、after伪类
weixin_46149357的博客
07-24 684
clear属性 如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响 clear的作用： 清除浮动元素对当前元素所产生的影响 可选值： 1）left 清除左侧元素对当前元素的影响 2） right 清除右侧浮动元素对当前元素的影响 3） both 清除两侧中最大影响的那一侧 原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使其位置不受到其他元素的影响。 设置浮动，此时box2被box1盖住 &lt.
解决margin-top塌陷的6种方法
irouduoduo的博客
06-09 1万+
demo:一个父盒子嵌套一个子盒子，子盒子margin-top带来的塌陷问题。      6种方法:   1.给父盒子添加border     2.给父盒子添加padding-top     3.给父盒子添加overflow:hidden     4.父盒子:position:fixed     5.父盒子:display:table     6.给子元素的前面添加一个兄弟元素  
css解决外边距塌陷
最新发布
10-24
`占位符字符或伪元素（`:before`或`:after`），这会阻止外边距的塌陷。 ```css .parent { position: relative; } .child { margin-top: 10px; &::before { content: ""; display: block; height: 0; clear: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值