浮动的结果是什么?如何清除浮动?
时间:2023-04-02 16:56:34
HTML
/div>CSS:.container,#div1,#div2{border:1pxsolid;}.container{width:100%;}#div1{float:left;宽度:200px;高度:200px;background-color:blueviolet;}本来想象的效果是这样的:结果是这样的:为什么div.container的高度是0?是因为float引起的高度折叠,即元素的上下底边重合,即高度为0。本例中为了导致如下结果:因为#div1是浮动的,由于脱离文档流,div.container的高度为0。这时候在div.container后面加一个div.box自然是在div.container下面了。但是因为div.container的高度是0,所以效果是#div1会覆盖div.box。但是如何解决这个问题,第一种方法可以这样:CSS:.container::before,.container::after{content:'';显示:块;clear:both;}在div.container中加入伪元素清除左右浮动可以解决这个问题。效果如下:第二种方法可以加上overflow:hidden;CSS:.container{div.container的宽度:100%;overflow:hidden;}为什么overflow:hidden可以清除浮动?事实上,我们在添加溢出时创建了一个BFC(块级格式化上下文)。只要满足以下条件之一,就可以显示和触发BFC:1.float的值不为none;2.溢出的值不可见;3.position的值是固定的/绝对的;4.显示y的值为table-cell/table-caption/inline-block/flex/inline-flex。BFC在计算高度的时候,浮动元素的高度也参与计算,所以div.container在计算高度的时候也会计算#div1的高度,所以才会有这种“清空浮动”的效果,包括#div1。