<style type="text/css">
.content{ border:10px solid #F00;width:150px; overflow:auto; zoom:1}
.text{ width:100px; height:100px; background:#000; float:left;}
</style>
<div class="content">
<div class="text"></div>
</div>
效果图：
不增加此css的实际图
解决办法：
给父元素加上overflow:auto;zoom:1即可解决，其作用是清楚子元素的浮动。
.content{ border:10px solid #F00;width:150px;overflow:auto;zoom:1}
实际上我们想要的效果
高度塌陷是指父元素在未指定高度的情况下(高度自适应子元素高度)，其内部的子元素因为设置了浮动属性，脱离文档流，导致...
父元素自适应宽高度，子元素浮动导致高度塌陷 高度塌陷: 示例图： HTML: CSS: 第一种解决方案： 通过给父...
如果我们为子元素容器设置了左浮动的属性，父元素只设置宽度而高度未设置，火狐、chrome、IE8+浏览器下则会出现...
子元素float，使得父元素不能自适应高度 父元素的高度变窄：不能在包含浮动子元素的高度，而变窄了，变窄的部分也刚...
在网页开发中通常希望容器的高度自适应(不设置高度)，让子元素把容器的高度撑开，当子元素设置浮动后容器的高度撑不开了...
前言 开发过程中，写元素的长宽，往往是父元素设置了自适应高度100%，而其子元素的高度应该设置为父元素高度减去10...
本来父元素是由子元素抻开的，子元素设置了浮动之后，子元素就脱离文档流了，父元素无法抻开，就会形成高度塌陷 解决高度...
本来父元素是由子元素抻开的，子元素设置了浮动之后，子元素就脱离文档流了，父元素无法抻开，就会形成高度塌陷 解决高度...
本来父元素是由子元素抻开的，子元素设置了浮动之后，子元素就脱离文档流了，父元素无法抻开，就会形成高度塌陷 解决高度...
本来父元素是由子元素抻开的，子元素设置了浮动之后，子元素就脱离文档流了，父元素无法抻开，就会形成高度塌陷 解决高度...
本文标题：解决父元素没有设置高度（自适应高度）子元素浮动造成高度无法自适应
本文链接：https://www.haomeiwen.com/subject/ijkxfxtx.html
网友评论