网站开发之前端：子div无法撑开父亲DIV

时间：2019-08-30 访问量：

原因：内部的DIV因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的DIV不会被撑开。

以下是几种解决办法（假设父div的class为“container”）:

方法1、使用伪类

container::after{    display: block;    height:0;    content: '';    clear: both;
}container{    display: inline-block; /*弟一种撑开办法，底下会有部分被遮到，所以添加这行，就玩美了*/}

方法2、不撑开的原理是overflow不可见，所以给父div添加overflow:auto;就行，IE要用_height:1%;

container{    overflow: auto;/*让主要内容区随内容自动撑开*/
    overflow-y:hidden;/*把出现的滚动条隐藏，但是底下会被遮到一点，不玩美*/
     _height:1%;/*对IE的hack*/
}

方法3、可以专门醉后添加一个子div用来清除浮动：
```
<div class="clear"></div>
```
设置样式.

clear{clear:both; font-size:0; height:1%;}

方法4、可以设置父div的高度（也就是手动撑开，不灵活）；
方法5、直接给父div设置 display: inline-block; 这样也自动撑开
方法6、直接给子div设置 display: inline-block; 也能自动撑开，但是排版问题有待研究学习
方法7、从网上还发现了一种方法，给父div增加属性：display:table;
方法8、子div浮动我就套不住你?OK,我让父div也浮动: 父div设置 float: left; 也可以