clearfix清除浮动中display:table;的理解

最新推荐文章于 2022-07-20 18:38:57 发布
原创 最新推荐文章于 2022-07-20 18:38:57 发布 · 5.7k 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#display:table; #clearfix #清除浮动

本文介绍了两种常见的清除浮动的方法：使用 clear:both 和 clearfix 技巧。clearfix 方法通过在元素后添加伪元素并设置 display 属性来实现自成一行的效果，从而达到清除浮动的目的。文章对比了 display:table 与 display:block 的不同之处。

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

清除浮动除了常用的clear:both;之外，还有一种就是利用重置样式表中的clearfix

具体如下：

.clearfix::after{
content:"";
diaplay:table;
clear:both;
}

这里解析一下display:table;

设置为display:table;  没有内容也会自成一行

设置为display:block;没有内容不会自成一行！！

这就是我认为设置display:table的原因。

事实上在大多数情况下设置display:block的效果是一样的！！！

 

本博客由博主原创，如需转载需说明出处！谢谢支持！

clearfix:after清除浮动的用法及测试代码
01-19
今天回顾一下css中的清除浮动 复制代码代码如下: .clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden} /*所有主流浏览器都支持 :after 伪元素。*/ .clearfix{*+height:1%;}/*不知道有什么用处，不加ie7也没有问题*/ .clearfix:after {visibility: hidden;display: block;font-size: 0;content: ” “;clear: both;height: 0;} .clearfix{*zoom:1
CSS——清除浮动
最新发布
？的博客
06-02 424
该盒子必须出现在所有左浮动盒子的下方。如果前方有左浮动盒子，浏览器会将该盒子下推到所有左浮动盒子的最底部。进而强制父盒子重新计算高度，直到高度能包裹所有左浮动盒。浮动是让元素脱离文档流直接悬浮在页面上，父元素会随着元素的变化而改变，而当元素出现浮动时原本支撑着父元素的高度消失，造成高度塌陷。如果前方有右浮动盒子，浏览器会将该盒子下推到所有右浮动盒子的最底部。如果前方有浮动盒子，浏览器会将该盒子下推到浮动盒子的最底部。该盒子必须出现在所有左浮动和右浮动盒子的下方。该盒子必须出现在所有右浮动盒子的下方。
清除DIV浮动--使用:display: table
weixin_30363509的博客
12-25 429
清除DIV浮动--使用:display: table 清除DIV浮动--使用:display: table 特点：不占用物理空间. display :table ;--将对象作为块元素级的表格显示 CSS修正代码:.wrapfix { display: table; } 以上代码加在CSS文件里即可,用:clas...
CSS display属性和浮动属性以及浮动规则、清除浮动
swlsqf的博客
02-23 844
定义和用法 display 属性规定元素应该生成的框的类型。 说明 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。 注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛...
clearfix的用法
m0_67176957的博客
04-02 1737
.clearfix::before, .clearfix::after{ content:‘ ’; display:table; clear:both; } clearfix这个样式可以同时解决高度塌陷和外边距重 叠的问题，当你在遇到这些问题时，直接使用 clearfix这个类就可以。 ...
css清除浮动clearfix:after的用法详解（附完整代码）
01-21
网上常用的完整代码： ... display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ *zoom:1; }  如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div
解释.clearfix:after, .clearfix:before { display: table; content: " "
05-10
在网页布局中，当某个元素应用了浮动（float）属性后，其父元素可能会因为没有正确计算浮动元素的宽度而出现布局问题，因此需要使用“清除浮动”的技巧来解决这个问题。 上述代码中，`.clearfix:after`和`.clearfix...
clearfix:before, .clearfix:after { content: ""; display: table; }
11-05
clearfix是CSS中一种常见的用于清除浮动的技巧，主要用于防止块级元素间的间距异常。当你有多个浮动的块级元素在一个行内堆叠时，它们可能会导致下面的内容无法正常显示。`.clearfix`就是一个自定义的类名，它的作用...
CSS中使用clearfix清除浮动的方法
09-25
为了解决这个问题，开发者们发展出多种清除浮动的方法，其中一种常用且优雅的解决方案就是clearfix。本文将深入探讨clearfix方法，以及其发展历程和不同实现方式。 首先，传统的清除浮动方法是通过添加额外的`clear...
css中清除浮动的几种方法汇总好方法坏方法都有
weixin_43163281的博客
01-12 387
浮动的最初目的是让文字可以环绕在图片周围，后来浮动才被用到了布局当中，当使用福东时，往往会产生一些副作用，如父元素塌陷，元素重叠等，清除浮动就是为了消除这些副作用。 首先我们来了解浮动的原理，通过设置浮动，元素脱离文档流，其父元素如果没设置宽高就会塌陷，其他文本和行内元素会环绕它，浮动后的display属性也会发生变化，他不在是一个行内元素，可以对其设置宽高，浮动类型分为左浮动left 有浮动right， 第一种方法 额外标签法 利用float：left/right/both来清除浮动 原理就是添加该属性的
css中float，position，display，以及清除浮动的知识点
tian_xiaobai的博客
07-23 503
float：css属性， 指定一个元素应沿其容器的左侧或者右侧放置，允许文本和内联元素环绕它；该元素从网页的正常流动（文档流）中移除，也保持部分的流动性（与绝对定位相反）。 float意味着使用块布局，在某些情况下修改display的值。 left：元素浮动在其所在的块容器左侧的关键字 right：元素浮动在其所在的块容器右侧的关键字 none：元素不浮动的关键字 ...
前端三剑客之CSS---浮动的难点解析三（使用clear清除浮动和伪元素after清除浮动以及终极解决浮动的.clearfix类)
Calarqiang的博客
08-30 727
清除浮动的两种基本通用方式 1. 使用clear清除浮动 作用：可以清除某个浮动元素对下面布局的影响！ 可选值： left 清除设置了float:left的元素对自己的影响。 right 清除设置了float:right的元素对自己的影响。 both 清除两侧浮动中对自己影响最大的那一侧浮动。 疑问？何为最大影响？ clear本质： 它的本质是给某个元素设置一个正的margin-top值。当一个元素上面有一个浮动元素时，浏览器会自动计算出该浮动元素的盒子占地大小（可见框+margin）,然后给
清除浮动clearfix的写法
hfdxmz_3的博客
04-30 481
.clearfix:after, .clearfix:before { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix{zoom:1;/*为IE6，7的兼容性设置*/}
清除浮动的三种方法
Triumph_light的博客
10-07 276
1.clearfix:before,.clearfix:after { content:""; display: table; } .clearfix:after { clear:both; } 2.clearfix:after { visibility: hidden; clear: both; display: block; content: “.”; height: 0 } .clearfix { *zoom: 1 }
css之清除浮动
aaaaaHhhhdddd的博客
09-06 193
1.什么是浮动？ 当给盒子添加：float属性时，盒子会脱离正常的文档流。帮助我们进行页面布局。 清除浮动的本质是？ 在复杂的页面布局中，盒子大小有时候不适合写死，内容多父级盒子会被撑开。所以不设置父级盒子的大小，父盒子是没有高度的，但是子级盒子浮动之后，父级盒子会缩小（子级盒子是浮动在父级盒子之上，不占位置），会影响下面正常的文档流的位置。所以要清除浮动。 本质：清除浮动元素脱离标准流造成的影响。 清除浮动元素策略：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外部其他盒子的布局。 2.清除
CSS中如何解决高度塌陷
ghjkfuihg的博客
07-20 277
CSS中如何解决高度塌陷
CSS清除浮动的四种常用方法及其优缺点
Moony_wy的博客
01-30 1060
什么是CSS清除浮动？ 在非IE浏览器下，当容器的高度为auto（没有设置），且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 CSS四种常用的清除浮动方法：额外标签法清除浮动；父级添加overflow: hidden清除浮动; 父级添加after伪元素清除浮动；父级添加双伪元素清除浮动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值