clearfix为什么用display:table,而不用display:b…
2018-06-24 01:38:08来源:未知 阅读 ()
我们都知道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一致。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 巧用 display: contents 增强页面语义 2020-05-28
- 为什么那么多自学WEB前端的人后来都放弃了? 2020-05-26
- 在web开发中,为什么前端比后端更得到转行程序员的青睐?必 2020-05-15
- 清除浮动clearfix 2020-04-27
- [前端第一课]开发前的准备 2020-04-01
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash