正在回答 回答被采纳积分+1
4回答
小于飞飞
2017-05-29 21:13:36
做个详细的解释：
css 代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .main { background-color: #f2f4f6; border: 1px #ececec solid; margin: 0 auto; } ul li { width:200px; list-style-type: none; background-color: #fff; text-align: center; border: 1px red solid; /*float: left;*/ 注释1 } /*.clear{clear: both;}*/ 注释2 /*.two{ clear:left;}*/ 注释4 |
1 2 3 4 5 6 7 8 | html代码：<ul class="main"> <li class="one">冰箱</li> <li class="two">洗衣机</li> <li class="three">空调</li> <!-- <div class="clear"></div> --> 注释3 </ul> |
一、先不加注释部分代码运动：
接着添加 注释1 代码，效果如下：
二、发现父元素灰色背景没有了，因为子元素都浮动了，所以父元素的高度塌陷了，这是加clear 来清楚浮动。
三、添加注释2、3，相当于在父元素里最后添加空 div , 进行设置，来清除浮动，这是看到了灰色的背景效果：
四、如现在想, two元素的左侧没有浮动元素，可以给该元素清楚浮动，添加注释 4 ，看看效果：
发现第二个元素下来了，也就是不许左侧有浮动元素。
所以要看你实现什么效果，来确定如何清楚浮动。
祝希望对你有帮助，祝学习愉快，欢迎采纳。
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧