clearfix--解决高度塌陷和父子元素外边距重叠的最终写法

最新推荐文章于 2023-02-08 10:53:47 发布
最新推荐文章于 2023-02-08 10:53:47 发布
阅读量815 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41173164/article/details/79148076
本文介绍了一种常用的CSS技巧——clearfix的实现方式。通过:before和:after伪元素结合display:table和clear:both属性解决了浮动元素引起的布局问题。适用于需要清除浮动影响的各类网页布局场景。

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

.clearfix:before,clearfix:after{

 content:"";

display:table;

clear:both;

}

.clearfix{

 zoom:1

}

轻水与猫
关注
前端高频面试题--持续随缘更新
JackieDYH的博客
02-10 887
目录 1、简述的作用？ 2、常见的浏览器及其内核有哪些？ 3、常见的块级标签和行内标签分别有哪些？ 4、b 和 strong （i 和 em ）标签的区别？ 5、谈谈对语义化的理解？ 1、简述<!DOCTYPE>的作用？ <!DOCTYPE> 帮助浏览器正确地显示网页 声明叫做文件类型定义（DTD），告诉浏览器这个文件的类型，让浏览器知道该用哪个规...
大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1400
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
clearfix 解决高度塌陷
qq_51942661的博客
06-15 354
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 300px; height: 300px; background-color: #008000; /* padding-top: 1px; */ } .
解决高度塌陷和外边距重叠——Clearfix类
weixin_46149357的博客
07-24 290
解决外边距重叠问题，把子元素和父元素的隔开，来达到效果 用table可以把两个元素隔开并且不占位置因为它是空的 display : table; 解决高度塌陷用clear: both; clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当遇到这些问题时直接只要clearfix类 .clearfix::before, .clearfix::after{ content:""; display:table; ...
css解决高度塌陷以及外边距重叠的问题
嘘...一只bug
02-22 468
什么是高度塌陷？ 在浮动布局中，父元素的高度默认是被子元素撑开的，我们给子元素设置了浮动，其会脱离文档流，将无法撑起父元素的高度，导致父元素的高度丢失， 其下的元素会自动上移，导致页面布局混乱 如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
clearfix ~~ 高度塌陷问题的终极解决方法
weixin_57375608的博客
09-06 130
clearfix
【前端小点】clearfix解决高度塌陷及外边距重叠
球球博客
05-12 667
高度塌陷及外边距重叠 解决： .clearfix:after, .clearfix:before{ content: ''; display: table; clear: both; } 一、高度塌陷问题 高度塌陷是浮动布局中比较常见的一个问题。在浮动布局中，父元素的高度默认是被子元素撑开的，但，当子元素浮动后，子元素会完全脱离文档流，无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失后，其下的元素会上移，导致页面布局混乱。 举个栗子： <body> <div cl
CSS笔记(二) - 页面布局 盒子模型
JUN_7777的博客
02-08 2528
行内元素
尚学堂-HTML-CSS（基础）的学习记录
xieanna123的博客
03-16 1816
HTML 和 CSS 核心基础教程 尚学堂的教程 https://www.bilibili.com/video/av21557880?p=1 笔记 一、HTML和CSS的简介 20191010(1-4） HTML (Hypertext Markup Language)超文本标记语言 。它负责网页的三个要素之中的结构。HTML 使用标签的的形式来标识网页中的不同组成部分。所谓超文本指的是超链接 ，使...
同行兄弟出去面试题的汇总 2020-7-19
weixin_48116269的博客
10-20 766
1.普通数据类型 (1)普通数据类型有哪些? ​ 字符串型string： 数值型number,：undefined：null,：布尔型boolean 复杂数据类型有Object Array Date (2如何检测类型? console.log(typeof data) instanceof Array.isArry() (3如何转换数据类型? 转字符串 ​ 数据.toString() ​ String(数据) ​ 隐式转换:数据+’ ’ Join(‘分割符’) 转数值 Number必须是纯数字(数据)
clearfix 解决高度塌陷/分离父子元素外边距
qq_34668557的博客
04-08 256
.clearfix:before, .clerafix:after{ content: ""; display: block; clear: both; }
解决高度塌陷--clearfix
rt5476238的博客
01-14 757
在写项目时可以写一个这样的类用来解决高度塌陷和边距重叠问题。 .clearfix:before,.clearfix:after{ content: ""; display: table; clear: both; } 因为IE8及以下的版本不兼容before和after伪类，所以可以再写一个样式解决： .clearfix{ display: block; ...
【前端-CSS】clearfix解决外边距重叠、高度塌陷问题
慢慢来吧，都会有的。
03-12 617
clearfix解决外边距重叠、高度塌陷
clearfix样式(同时解决高度塌陷和外边距重叠问题)
eht_Noob的博客
06-29 271
clearfix样式 能够同时解决高度塌陷和外边距重叠的问题 <style> .clearfix::before, .clearfix::after { content: ''; display: table; clear: both; } </style> 将需要解决高度塌陷和外边距重叠元素的class设置为clearfix即可。 ...
高度塌陷与垂直方向外边距重叠
qq_48113035的博客
02-28 228
一、高度塌陷 1.介绍：当父元素没有设置高度时，如果子元素全部浮动，那么父元素将没有元素撑开，那么就会导致父元素高度塌陷。 案例如下： <style> .wrapper{ width: 300px; border: 2px solid red; } .box1{ float: left; width: 50px; heig
CSS高度塌陷问题和外边距重叠的解决方案（clear方法）
ScottePerk的博客
08-29 1211
我们可以利用浮动属性来实现高效的水平布局，但是如果你写下面的代码，就会发现box1的高度出现问题，因为box1的高度是靠子元素box2撑起来的，现在box2变成了浮动元素，box1就没有了高度，这就造成了高度塌陷问题。如果我们在蓝色div2的下方兄弟位置添加一个div3，并且设置clear属性，那么div2将会顶住div3，那么红色的div1将会有高度，高度就是div2的高度。可以通过调整父子的padding来投机取巧的实现这样的功能，但比较麻烦，而前面的clear属性也可以完美的解决这个问题。......
clearfix样式(同时解决高度塌陷和外边距重叠)
atty_ping的专栏
05-04 325
/* clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可 */ .clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; ...
CSS_浮动造成的高度塌陷&BFC&clear&clearfix
weixin_45084986的博客
03-23 316
BFC(Block Formatting Context) 块级格式化环境 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 可以通过一些特殊方式来开启元素的BFC: 1、设置元素的浮动(不推荐) 2、将元素设置为行内块元素(不推荐) 3、将元素的overflow设置为一个非visible的值 -常用
解决高度塌陷与外边距重叠的方法
43612538的博客
09-12 510
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>解决高度塌陷与外边距重叠的方法</title> <link rel="stylesheet" href="css/reset.css"> <style> .clearfix:bef
解决CSS高度塌陷：浮动元素影响父级高度
本文主要探讨了CSS中的高度塌陷问题及其解决方案，重点在于理解浮动元素对父元素高度的影响以及如何避免布局混乱。 在CSS布局中，一个常见的问题就是"高度塌陷"，也称为"高度消失"。这个问题通常发生在父元素的子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值