使用after伪元素解决高度塌陷（最终）

最新推荐文章于 2023-07-14 08:00:00 发布
原创 最新推荐文章于 2023-07-14 08:00:00 发布 · 348 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #前端

本文介绍了如何通过CSS after伪元素配合clear属性和display属性，有效地解决网页布局中的高度塌陷问题，让你的父元素高度自适应。

使用after伪元素解决高度塌陷

高度塌陷最终方案

	::after{
	
			clear:both;			//清除浮动元素的影响
						`默认情况下after伪元素是一个行内元素!`
							
			display:block;		//转换成块元素，即可撑起父元素高度
	}
67_使用after伪元素解决高度塌陷问题
述安的博客
08-20 781
此时发现，由于box2浮动，box3的位置上移，然后就是box3的文字不会被浮动元素遮盖，这时候如果想办法将文字移到绿盒子的下边，则父元素会自动扩大高度以包裹文字，因为box3是块元素，没有浮动效果，那么一定会被父元素包住。如何将文字移到绿盒子下边呢，box3清除浮动就好了！ 由此可见，父元素的高度恢复，然而是由box3导致的，所以我们知道，只要在父元素的最后地方添加一个内容（这个内容可以是空白内容），那么父元素的高度就会撑起，无论子元素的高度多高，因为父元素始终得包裹住最后的空白内容，那么就可以无视子元
50使用after伪类解决高度塌陷问题
quanxiaobai_的博客
06-09 715
重现高度塌陷问题 <!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
【HTML+CSS学习笔记】使用after伪类解决高度塌陷
m0_47746932的博客
09-30 262
<!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
浮动和包含框的关系，伪元素after解决高度塌陷
weixin_30699235的博客
08-30 133
浮动会使元素尽量向左或向右移动，直到碰到包含框或另外一个浮动元素的盒子模型的边缘 包含框并不会改变里面浮动元素的宽高，浮动元素宽高不会限制在包含块以内 <!DOCTYPE html> <html> <head> <style type="text/css"> * { margin:0; ...
html伪元素before占用高度,css – 可以：before和：之后的伪元素从父元素继承高度？...
weixin_36090220的博客
06-23 750
否.伪元素可以从其生成元素的父代继承值的唯一方法是当生成元素本身也从其父代继承时.这是因为继承从父母到孩子,一次一个级别.为了继承在多个级别的后代工作,每一个后裔必须继承.例如,考虑以下HTML：使用以下CSS：.parent {width: 100px;height: 100px;}.parent > .child:before,.parent > .child:after {con...
BFC/clear/::after伪元素 解决高度坍塌, ::before解决外边距重叠 （clearfix同时解决高度塌陷和外边距重叠）（css）
KennGum的博客
06-06 843
BFC/clear/::after伪元素 解决高度坍塌, ::before解决外边距重叠 （clearfix同时解决高度塌陷和外边距重叠）（css） 高度塌陷的问题： 在浮动布局中，父元素的高度默认是被子元素撑开； 当子元素浮动后，其会完全脱离文档流，将会无法撑起父元素的高度，导致父元素的高度丢失 BFC（Block Formatting Context） 块级格式化环境 BFC是一个CSS中的一个隐含属性，可以为一个元素开启，开启BFC后该元素会变成一个独立的布局区域 元素开启BFC后的特点：
CSS中伪元素的细节
黑夜来袭Z
09-10 357
1、伪元素表现为行内元素。 2、伪元素必须包含content属性，否则不会显示。 3、content中的内容不为空并且没有设置高度时，伪元素的高度会受到父级元素line-height影响。 4、content中的内容位置受父级元素line-height影响。 ...
父元素的高度为0利用伪元素:after清除浮动可解决问题
09-25
为了解决这个问题，CSS提供了一种更优雅的解决方案，那就是使用伪元素`:after`。 `:after`伪元素是CSS中的一个特殊选择器，它可以在任何元素的末尾添加内容，而无需在HTML中实际添加任何额外的元素。通过将`:after`...
父级元素未设置高度和宽度时高度塌陷问题的解决方法
09-25
这种方法的实现通常需要结合伪元素`:after`，通过向其添加空内容，并设置必要的样式（如`content: &#39;&#39;`、`display: block`、`height: 0`、`font-size: 0`、`clear: both`、`overflow: hidden`），来确保父级元素能够...
div CSS 清除float常用方法(:after和clear:both)
王鹤霖的专栏 三人行必有我师
02-02 1005
 很多前端都是用.clearfix:after{ .....}  和 .clearit{....}的组合 来清除浮动， 下面我来讲解下这俩种的用法： 首先大家切页面经常用到浮动 float:left; float:right; 有浮动就需要清除他们， after伪类由于受到ie6 7的不支持所以大多数时候，一般都需要定义一个固定的class名设置属性clear的值both的div 两
Css基础部分:如何消除浮动带来的高度塌陷问题
king520089的博客
07-14 635
如何消除浮动带来的高度塌陷问题
2020-11-03
cxxhhzsl的博客
11-03 242
高度塌陷的产生和解决方法 高度塌陷的产生条件:父元素没有设置高度，所有子元素都浮动 1.给父元素设置高度，此方法适合高度固定的布局 2.给父元素添加属性overflow: hidden 3.在所有浮动的元素后面添加内容为空的块元素，并且添加声明clear:both; height:0;overflow:hidden;(添加height：0；和overflow：hidden；是为了避免这个空标签如果是li的话，浏览器有默认高度。一般使用clear：both即可。) 4.万能清除法： 给高度塌陷的元素添加伪对象
解决高度塌陷的几种方法
l15367918596的博客
04-20 5407
解决float造成的高度塌陷问题
【高度塌陷最终解决方案】使用伪元素解决高度塌陷
Sy_origami的博客
04-17 553
使用伪元素解决高度塌陷 文章目录使用伪元素解决高度塌陷前言一、什么是伪元素？二、使用步骤总结 前言 这一期将介绍如何通过::after伪元素来解决高度塌陷。 一、什么是伪元素？ 常见的伪元素有::before 和 ::after 两种，他们不是真正的页面元素，html没有对应的元素，但是表现和用法保持一致。通过这种方法可以实现大部分的网页布局。 ps. 1.设置伪元素时必须设置content属性，来表现伪元素，内容可以为空但是必须设置属性。 2.伪元素不占位置。 二、使用步骤 代码如下（示例）：
10-css宽高自适应&伪元素
CapejasmineY的博客
08-05 1591
css宽高自适应方案、清浮动总结与拓展、伪元素的引入
::before或::after伪类改变父元素高度
qq_48113035的博客
02-25 2959
一、介绍 当父元素设置高度为100%时，那么其伪类(::before和::after)，可以设置padding-top或padding-bottom改变父元素高度。 如：父元素设置如下 <style> .nav{ width: 200px; height: 100%; background-color: red; } </style> <div class="father"></div>
关于:after和:before伪类的用法，以及让浮动占据高度问题。
kelvinbean的博客
07-22 9647
第一次写技术博客。写得不好的话，大神们请见谅啊。 前段时间有个搞前端搞得还不错的朋友去面试，被问到了一个问题。就是怎么用一个标签画出一个铅笔状的图形。就像下图这样。 当时我还有点懵，感觉一个标签做不到啊。最少两个。一个div画个正方形，一个div画个三角形。还百度了好久都没找到解决方案。 应该很多人都知道怎么不用一个div画个三角形吧？如果实在不知道的话，我这里也可以说一下，就是使用
伪元素解决float高度塌陷
withwz的博客
03-25 572
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .outer{ border: red solid 2px;...
使用三种方法，练习使用3种方式解决内容部分父级盒子高度塌陷 1.使用空标记清除浮动 2.使用after伪对象清除浮动 3.使用BFC解决高度塌陷问题
最新发布
03-20
2. 使用::after伪元素生成清除区域 代码示例： ```html .clearfix::after { content: ""; /* 必须设置 */ display: block; /* 必须设为块元素 */ clear: both; /* 关键属性 */ visibility: hidden; height: ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值