怎样让浮动的子DIV自动撑大外边的父级DIV

一般我们需要一个浮动的子DIV不跑出父级DIV时，都会想到给父级的DIV一个固定的高宽，但这样做的前提是必须知道子DIV的高宽和个数，这样才好计算出父级DIV的高宽来。但是在一些情况下，我们根本无法知道子DIV的个数，这时就会出现子DIV跑到父级DIV的外边去了。如图：

看到没有，上图中下边两个DIV就跑了出来，这位非常影响页面布局。那么可不可以给父级DIV不指定高度或者CSS定义为自动呢？好，现在我们就设置一下看看。下面是我分别设置后的结果：

 

不难看出，父级DIV根本就缩成一条线在顶上，4个子DIV跳出出了。所以这个方法也行不通。那么要如何定义CSS才能解决这个问题呢？这时我想到了overflow（溢位），我们来试试，先换成visible（可见），这时还是跟上图一样，再用scroll（滚动），就出现了下面的样子：

 

可是可以，但不是我们想要的结果，并且还多了个滚动条。再换成auto（自动）和hidden（隐藏），这时符合我们的需要，如图：

 

但就倒底该用哪个呢？，我推荐使用overflow:hidden（溢位：隐藏）。为什么呢？原因是在没有定义父DIV的高度时，两个看不出什么差别来，一旦定义了，当父级DIV的高度小级DIV总和的高度时，使用overflow: auto（溢位：自动）就会出现滚动条，排列不规则；但是使用overflow:hidden（溢位：隐藏）就不会出现这样的情况，子DIV超出后它会自动给隐藏掉，这样看起来也显得很规则。所以在没有定义父级DIV高度的情况下，我还是建议用overflow:hidden（溢位：隐藏）

转载于:https://www.cnblogs.com/jiunie/p/8009524.html