Web端页面布局小技巧--解决高度塌陷的三种方法

1、什么是高度塌陷?

  当子元素有浮动,父元素没有高度的时候,父元素会出现高度塌陷。

2、解决方法

2.1、给父元素添加over-flow:hidden

    
    


    
"box">

  • 原理:overflow:hidden;触发了一个BFC(块级格式化上下文,布局逻辑)也就是说父元素变成了BFCBFC规定:计算BFC高度的时候,浮动元素也参与计算
  • 弊端:如果存在一个定位在父元素外围的元素,该元素会被隐藏
2.2、在浮动元素下方添加一个空的块级标签,给其设置样式clear:both;

    
    


    
"box">

"toClear">
  • 原理:clear:both;会忽略上方同级添加浮动元素留出的空间,在父元素最底下显示,撑开父元素高度
  • 弊端:形成代码的冗余(出现高度塌陷,添加一个div
2.3、万能清除法(也是应用最多的一个方法)

    
    


    
"box" class="clear_fixed">

这个方法很常用,而且一般我们在写页面时,只要封装一个类名,放在我们的公共样式表里,遇到想要清除浮动影响的父元素时,直接给该元素添加对应类名,随取随用,就很方便啦!

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