float问题？

.one{background-color: blue;width:100px;height: 100px;float: left;}

.two{background-color: green;width:100px;height: 100px;float: left;}

.three{background-color: red;width:100px;height: 100px;float:left;}

div.aaa{clear:both;}

为什么在每一个div后面清除浮动三个div是垂直排列，而在最后class=“aaa”的div里清除浮动，三个div是水平排列？

源自：float浮动 2-10 清除浮动语法

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2019-02-27 19:06:42

你好同学 , 是说的每一个浮动元素后面都有一个空div ,并设置清除浮动吗 ? 如下

如上给每一个元素后面加清除浮动 ,那么它清除的是上一个浮动元素对自己的影响 ,

而把前面的两个div.aa去掉 , 如下

几个元素并不受清除浮动的影响 , 所以会排列在一起 , 最后一个aa是帮助它后面的盒子清除上一个浮动元素带来的影响 . 例如你直接给一个浮动元素加清除浮动的属性 .那么清除的就是上一个元素对自己的影响 . 元素就不会和上一个浮动元素在一起浮动了哦

祝学习愉快 ,望采纳 .

好帮手慕夭夭 2019-02-27 18:00:06

你好同学 , 请把自己练习的完整代码上传 , 以便老师针对代码准确高效的帮助你分析问题 .

祝学习愉快 !

提问者慕田峪5398473 #1

<!DOCTYPE html> <html lang="zh-en"> <head> <meta charset="UTF-8"> <title>列表</title> <style type="text/css"> div.contain{border: 1px solid red; width:500px;} .one{background-color: blue; width: 100px; height: 100px; float: left;/*clear:left;*/} .two{background-color: green; width: 100px; height: 100px; float: left;/*clear:left;*/} .three{background-color: red; width: 100px; height: 100px; float: left;/*clear:left;*/} div.aaa{clear: both;} </style> </head> <body> <div class="contain"> <div class="one">11111</div> <div class="two">22222</div> <div class="three">33333</div> <div class="aaa"></div> </div> </body> </html> 是这样的，如果在所有浮动元素后面的空div中清除浮动，显示一排，如果在每个浮动div中分别清除浮动，还是垂直排列，为什么不一样呢？

2019-02-27 18:32:10