1、在最后一个子元素后面清除浮动 2、父元素加over-flow:hidden;(副作用：子元素定位不能超出父元素的范围) 3、父元素也一样浮动(最笨的方法)； 4、子元素使用inline-block;代替浮动； ...

一、问题描述： 　　当使用Flex布局时，子元素设置百分比高度后，如下图没有效果： 二、解决方法： 　　父元素必须设置高度，效果如下图： 三、完整代码如下 View Code ...

浮动元素使其父元素高度塌陷 我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。 这就要回到浮动元素的特性来说明此问题“当元素设置浮动后，会自动脱离 ...

当对盒子内的子元素应用float后，导致对象父元素内有高度，不能被撑开自使用高度。这是因为对子元素使用float之后，脱离了正常流，使得父元素没有高度导致的。 解决办法： 1.为父元素设置高度：适用于知道父级高度的情况，缺点是父级元素不能自适应 2.使用clear:both清除浮动：这里注意 ...

如果子元素没有设置浮动(float)，父元素实际上会根据内容，自动宽高进行适应的。 当子元素增加了浮动后，最简单的处理方法是给父元素添加overflow:hidden属性，此时父元素的高度会随子元素的内容自动适应的。 亦或者在子元素的最后一个清楚浮动。 ...

正常情况 如果子元素没有设置浮动（float），父元素的高度会随着子元素高度的改变而改变的。 设置浮动以后 父元素的高度不会随着子元素的高度而变化。 例如：在一个ul中定义若干个li，并设置float='left' 显示结果就会是这样： 解决办法 最简单的方法是，给父元素 ...

问题展示：可以看到设置float:left的盒子没有高度，导致下面的盒子错乱，往上移了。 正确展示： 第一种方法：只需要在float浮动盒子的父级元素加上 overflow: hidden 就可以！ 第二种解决办法：在浮动div的后面加上这个就可以 ...

情景描述：父元素由一个设置了高度的元素撑起，另一个元素自动继承父元素的高，并且两元素在一行显示。 现在情况 方法1： 　　设置父元素flex，子元素不设置高度 方法2： 　　父元素相当定位，子元素绝对定位，设置100%高 s1和s2元素都要 ...