3-2 编程问题,请问我这样设置崩坍处理不了怎么解决？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.content{width:100%;
height:auto;
border:1px solid #ccc;
padding:10px;
}
.part1{
float:left;
clear: both;
}
.test1,.test2,.test3{border:1px solid #ccc;
width:250px;
height:auto;
float:left;
}
</style>
</head>
<body>
<div class="content">
<div class="part1">
<div class="test1">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="test2">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="test3">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</div>
</body>
</html>
正在回答
什么part1为父元素，你发的代码里，为什么content的高度还是坍陷的呢？是因为他的子元素part1使用了浮动，浮动脱离了文本流，不在文本流中占据空间了，而content的高度是自适应的，也就是说他是靠里面的内容来撑开高度。所以他的高度由于内部的浮动导致了坍陷。
解决的方法：第一种给父级设定固定高度或者你也可以设置个最小的高度（不建议）
解决方法：第二种可以在content的最后添加一个空的div div的css样式里使用clear:both（不建议）
解决方法：第三中可以在content的最后添加一个空标签<br> 设置他的自身自带属性clear ='all';（不建议）
解决方法：用after方法,就是上面的那个，意思是在父级的最后添加一个块级元素，并且该块级块级元素设置了清除浮动（建议）
解决方法：给父级content添加overflow:hidden来触发bfc
其实你在part1中设置了清除浮动为什么还是没有解决content的高度坍陷呢?
清除浮动他清除的是他前面的浮动，是在同一容器中的在使用了浮动的元素，后面的元素使用清除浮动，这样的话，使用了清除浮动的元素，就不会因为前面元素使用了浮动，脱离文本流，而跑到前面去，也就不会会导致该元素被浮动元素所遮挡，因为浮动元素的层级会相对高一点，还有就是浮动是为了做文字环绕效果而产生的，所以如果该元素内部的内容为纯文本内容的话，他的空间虽然会被遮挡，当时里面的文字会自动的围绕浮动元素，不会被他盖住
希望可以帮助到你
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星