清除浮动主要有两种方式,分别是clear清除浮动和BFC清除浮动,其他的你也不用去了解了。
浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。
浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道。直到inline-block出来后,浮动也有它自己独特的使用场景。
浮动元素脱离了文档流,并不占据文档流的位置,自然父元素也就不能被撑开,所以没了高度。
overflow:hidden 内容会被裁减 clear:both; 父元素设置高度 在中间一个空盒子,然后给那个空盒子clear:both 其实还有很多套路能够清除浮动,比如给浮动塌陷的元素再添加一个浮动,添加一个绝对定位……等一些方法。
clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素,底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。这句话,请默念5次! 要注意了,我们是通过在别的元素上清除浮动来实现撑开高度的, 而不是在浮动元素上。 浮动元素,脱离了文档流,就算给第三个元素上下加了清除空间,也是没有任何意义的。
✦ BFC容器是一个隔离的容器,和其他元素互不干扰;所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。 ✦ BFC可以包含浮动;通常用来解决浮动父元素高度坍塌的问题。
我们可以给父元素添加以下属性来触发BFC: ✦ float 为 left | right ✦ overflow 为 hidden | auto | scorll ✦ display 为 table-cell | table-caption | inline-block | flex | inline-flex ✦ position 为 absolute | fixed
IE6/7不支持BFC,也不支持:after,所以IE6/7清除浮动要靠触发hasLayout,了解下就行,毕竟IE6/7已经是历史的产物了。 参考链接: https://www.jianshu.com/p/09bd5873bed4 https://www.jianshu.com/p/a0500b54da13