css清除浮动方法总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css清除浮动方法总结相关的知识，希望对你有一定的参考价值。
一、伪元素清除浮动
1 .clearfix:after{ 2 content: ""; 3 display: table; 4 clear: both; 5 }
为什么选择display:table
构成Block Formatting Context的方法有下面几种：
1. float的值不为none（脱离文档流） 2. overflow的值不为visible。 3. display的值为table-cell, table-caption, inline-block中的任何一个。 4. position的值不为relative和static（脱离文档流）
应用了.clearfix和.menu的菜单极有可能是多级的，所以overflow: hidden或overflow: auto也不满足需求（会把下拉的菜单隐藏掉或者出滚动条）
display: inline-block会产生多余空白，所以也排除掉
剩下的table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context
display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context
这样我们新的.clearfix就会闭合内部元素的浮动
二、空标签清除浮动
三、父元素设置高度，避免坍塌
四、父元素设置overflow:hidden;
设置overflow:hidden，构成了BFC
同理，父元素脱离文档流也会清除浮动
以上是关于css清除浮动方法总结的主要内容，如果未能解决你的问题，请参考以下文章