子div设置float后导致父div无法自动撑开的问题

子div设置float后会导致父div无法自动撑开

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

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

方法1、使用伪类

1 .container:after{
2             content: ".";
3             display: block;
4             height: 0;
5             clear: both;
6             visibility: hidden;
7         }

1 .container{
2             display: inline-block;/*第一种撑开办法，底下会有部分被遮到，所以添加这行，就完美了*/
3         }

 

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

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

方法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;

---------------------------------------------------------------------------------------------

以上办法可能还有不妥之处，有待日后补充。

 

转载于:https://www.cnblogs.com/caiquan/p/6243570.html