项目场景:
浮动元素缩放,高度塌陷。
问题描述:
float
做项目时,元素已经设置了浮动,而且父元素也清除了浮动,但是会出现缩放时,会出现高度塌陷问题。如下图。
<style> li{ float:left; width:110px; height:90px; margin:5px; list-style: none; background-color: aqua; } </style>
</head>
<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
原因分析:
父元素没有设置宽度,会导致缩放失真,元素塌陷,一行排列不下,会换行排列 给父元素设置最小宽度,或者宽度即可。
解决方案:
float-1
ul{
/* width: 600px; */或者min-width: 600px;
}
本文地址:https://blog.csdn.net/weixin_50821119/article/details/111099641
黄山市民网:https://www.huangshanshimin.com/