怎样让浮动的子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