Css Float Inner Block Problem

Posted on | In
内部元素浮动，不能撑起父元素（内部浮动有高度元素，父元素没有高度）

Refer:子div撑不开父div的几种解决方法

1
2
3
<div>
  <div style="float: left">子元素</div>
</div>

内部div浮动，父级div没有被内部div撑起来

  • 原因：内部div float之后，丢失了clear:both和display:block的样式，所以父级div不会被撑开 *

方案1⃣️：

1
2
3
4
5
6
7
8
9
10
为父级div添加clearfix class
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
IE下有问题
.clearfix {height: 1%;}

方案2⃣️：

父级元素添加 overflow:auto 属性

方案3⃣️：

父级元素添加 display: table (推荐)