css 子元素设置float,父元素高度塌陷

2024-09-24 05:57:52 203人阅读

以div元素为例。div元素的高度会通过内容自动撑开。也就是说，内容有多少，高度就有多高。但是当内部元素设置了float属性之后，会是父元素高度塌陷

<div class="container">
       <p>Hello World!Hello World!</p>
       <div class="clearfix"></div>
</div>

清除浮动的方法

父元素底部添加空div，然后在添加属性clear : both

.container .clearfix {
  overflow: hidden;
  *zoom: 1;
}

父元素设置伪类after

.container:after {
  content: "";
  display: table;
  clear: both;
}

css 子元素设置float,父元素高度塌陷

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们