清除浮动的三种方式及其原理
浮动元素的特性
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
浮动元素带来的问题
因为浮动元素脱离文档流,所以对于其处于正常文档流中父元素,无法获知其高度,导致父元素自身的高度塌陷(失去浮动元素占据的高度)。
清除浮动的三种方式
设置float
son div
使用overflow:hidden 清除浮动
clear:both;
clear:both ;son div
div1
div2
div1
div2
另外一种方式position:absolute;
不推荐这种方式,因为这需要改变父元素本身的position属性。也许在某种情况下,你可以修改。但是,如果你不能修改怎么办??
postion:absolute clear float
独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器高度塌陷,就是说包含块会把浮动元素的高度也计算在内,所以就不用清除浮动来撑起包含块的高度。
形成一个BFC的情况:
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible