html+CSS布局:float浮动带来的高度塌陷问题和如何清除浮动(三种方法)带来的影响

清除浮动效果图:

 清除前:因为元素一二三都浮动(设置了float: left;),所以造成高度塌陷,所以father的兄弟元素有一半部分在上面,嵌入了上层空间

(因为

 .brother设置了两倍的宽高,所以有一般father的兄弟元素嵌入了上层

 

html+CSS布局:float浮动带来的高度塌陷问题和如何清除浮动(三种方法)带来的影响_第1张图片

而浮动的不占据空间,只浮动在表层,只有边框带有的高度和div加边框构成本身的宽度

html+CSS布局:float浮动带来的高度塌陷问题和如何清除浮动(三种方法)带来的影响_第2张图片

清除浮动后:因为元素一二三都清除了浮动(设置了float: left;),占据空间,所以father的兄弟元素全都放在了下面,无法再嵌入上层空间中

html+CSS布局:float浮动带来的高度塌陷问题和如何清除浮动(三种方法)带来的影响_第3张图片

 

   

   

   

 

代码实现 :




    
    
    
    浮动


    
   
   
   
    
元素一
元素二
元素三
father的兄弟元素

你可能感兴趣的:(html,css,面试,前端,css3,css,面试)