前端(五)

解决塌陷

高度塌陷

  • 文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷



    
    高度塌陷
    



前端(五)_第1张图片
没有设置浮动之前的效果

前端(五)_第2张图片
设置后的效果
  • 由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。

解决

  • 根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context简称BFC,该属性可以设置打开或者关闭,默认是关闭的。



    
    解决高度塌陷
    


前端(五)_第3张图片
效果


实战项目

导航条:




    
    导航条
    





前端(五)_第4张图片
效果

前端(五)_第5张图片
效果


THIS PERIOD END

你可能感兴趣的:(前端(五))