解决父元素没有设置高度(自适应高度)子元素浮动造成高度无法自适应的问题

如果我们为子元素容器设置了左浮动的属性,父元素只设置宽度而高度未设置,火狐、chrome、IE8+浏览器下则会出现问题。



效果图:

解决父元素没有设置高度(自适应高度)子元素浮动造成高度无法自适应的问题_第1张图片
不增加此css的实际图

解决办法:
给父元素加上overflow:auto;zoom:1即可解决,其作用是清楚子元素的浮动。

.content{ border:10px solid #F00;width:150px;overflow:auto;zoom:1}
解决父元素没有设置高度(自适应高度)子元素浮动造成高度无法自适应的问题_第2张图片
实际上我们想要的效果

你可能感兴趣的:(解决父元素没有设置高度(自适应高度)子元素浮动造成高度无法自适应的问题)