一个父盒子不设高度，两个子盒子都设了左浮，这时候父盒子怎么才能有高度

Question

想让子盒子撑起父盒子的高度，可是两个子盒子都设了浮动，怎么解决

<div class="main">

<div class="col1">
</div>
<div class="col2">
</div>

</div>

Answer 1

可以了解一下前端中的 BFC，理解了之后，解决就不难了

Answer 2

设置父容器的属性 overflow: hidden;试试

Answer 3

子元素全部浮动，父元素会高度塌陷，请清除浮动。常用的，给父元素加个after伪元素。

.clearfix:after{
  display:block;
  content:"";
  overflow:hidden;
  clear:both;
  height:0;
}

Answer 4

问题重点思路是如何“清除浮动”
可自行搜索实践解决。

Answer 5

撑起父盒子高度，.main{overflow:auto;}

Answer 6

bootstrap 3.3.7中解决该问题的代码

.clearfix:before, .clearfix:after {
    display: table;
    content: " ";
}

.clearfix:after {
    clear: both;
}

bootstrap 2.3.1 中解决该问题的代码

.clearfix {
  *zoom: 1;
}

.clearfix:before, .clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

sofish的Typo.css中解决该问题的代码

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

使用以上的css定义后，在父元素的class属性中加入clearfix即可解决； 根据你需要支持的浏览器版本，可参考bootstrap各版本的实现； 具体实现原理请自行google或baidu；对于clearfix的讲解网上一堆一堆的

Answer 7

父元素 清除浮动

.clearfix { zoom: 1;}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}

再给父元素添加这个类

Answer 8

overflow：hidden

Answer 9

设置overflow: auto 原理可以去了解下BFC

Answer 10

清除浮动，在父元素结束前添加浮动清除这个类。

Answer 11

最简单的就是设置父元素为 overflow: hidden

Answer 12

1. 设置父元素overflow:hidden
2. 让父元素也浮动
3. 在父元素内最下方添加空div或者用:after伪元素清除浮动（clear:both）