父级塌陷清除浮动的五种方法


在文档流中,若父元素未设置高度,那么父元素的高度默认是被子元素撑开的,即子元素多高,父元素就有多高。但是当子元素设置浮动之后,子元素就会完全脱离文档流,父元素还在文档流中,此时父元素的高度就没有子元素撑起,从而导致父元素的高度塌陷。简单来说,就是包含含有浮动的元素的上一级的高度变为0了,下面的元素会上去,这样会导致页面布局混乱。

方法1:父元素结束之前添加一个标签 <div style="clear:both;"></div>

缺点:增加了无意义的标签 方法2:给父元素设置overflow:hidden;zoom:1; 缺点:要是子元素要margin负值定位或是负的绝对定位,会被裁掉,所以此方法是有不小的局限性的。 方法3:让父元素本身也浮动float:left; 缺点:虽然可以撑开父元素,但是会导致父元素的宽度丢失,而且会导致下边的元素上移,使得跟父元素相邻的元素的布局受到影响。 方法4:给父元素一个固定高度,此方法适用于子元素高度已知并且固定的情况 方法5:给父元素设置display: inline-block; 缺点:会导致父元素的宽度丢失 优质内容筛选与推荐>>
1、VS2012中进行Web性能和负载测试
2、计蒜客_合法分数的组合
3、微信小程序 wx:for 循环列表 和 点击事件
4、taro编译报错this._create****** is not a function;[component] Property Observer Error @*****
5、js中showModalDialog和showModelessDialog的使用


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号