clearfix为什么用display:table,而不用display:block
2024-08-31 20:04:19
我们都知道clearfix一般这么写:
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{clear:both;}
但是为嘛用 display:table哪? 我用display:block好像也是显示很正常,也能清除浮动。
曾经也搜索过这个问题,感觉都讲得糊里糊涂的还是我水平太低了,反正我是看不懂他们想要表达啥意思,也不给例子,好了,废话不多说, 看结果吧:
See the Pen Clearfix by wenjie (@wenjie) on CodePen.
网上讲得一堆什么使父容器形成BFC,什么防止margin塌陷。但是不给例子,我怎么搞都不会塌陷。 我本来是蓝色那一块那样测试的,看到没,我用:block,margin很正常, 并没有塌陷啊? 后来才发现,其实margin要在一个 没有浮动的标签上,才会发生塌陷。所以 display:table就是为了解决这个 问题的。
两个都浮动的时候,并不会发生塌陷,不管你怎么测都测不出来 用block代替table有何问题。
还有为什么 要写:before呢?我去掉也是正常清除浮动啊, 一样的,也是防止margin-top的塌陷。也是要在没有浮动的标签上的时候才能测到。
其实这个对于塌陷这个词 我是存在疑问的。它并没有塌陷,它的margin还是确确实实存在的啊,只是针对外面的容器的margin了。 塌陷的意思 不就是不存在或者变小了吗?
最新浏览器(我用的是FF54测试),已经可以直接用 display: flow-root; 来清除浮动了,其效果 跟我们用的 display:table一致。
最新文章
- express路由探析(续)
- Java 循环中标签的作用
- 使用Flexible实现手淘H5页面的终端适配
- java异常处理的设计
- BCB 中测量Richedit 的文本总行高
- SqlDataAdapter怎么处理事务呢
- jstatd命令
- linux使用crontab -e 遇到No space left on device
- CentOS6.5下使用NetHogs监控进程网络使用情况
- C#中的ref与out参数(本文仅作为个人笔记)
- Python求解登楼梯问题(京东2016笔试题)
- [转]shell awk 入门,中级,高级使用
- jlink烧写Nor Flash时出错正确解决方法汇总:PC of target system has unexpected value after programming
- 入门级----黑盒测试、白盒测试、手工测试、自动化测试、探索性测试、单元测试、性能测试、数据库性能、压力测试、安全性测试、SQL注入、缓冲区溢出、环境测试
- php5.4后htmlspecialchars输出为空的问题
- git与eclipse集成之更新特性分支代码到个人特性分支
- vue-cli脚手架项目按需引入elementUI
- JSESSIONID、SESSION、cookie .
- 从入门到熟悉 HTTPS 的 9 个问题
- streaming优化:spark.default.parallelism调整处理并行度