为什么本来靠左排列的三个盒子，经过浮动的设置和清除后会靠右排列？

为什么本来靠左排列的三个盒子，经过浮动的设置和清除后会靠右排列？不是应该按照原来没有设置浮动代码前的效果显示吗？

阿扬在自律路上 2019-01-03

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

收起

2回答

好帮手慕夭夭 2019-01-04 10:15:06

你好同学 ,这就是浮动的特点 . 例如视频中 ,当你给三个盒子同时设置左浮动的时候 , 三个盒子会从左往右排列在一行 . 因为三个盒子在正常的文档流中 , 是自占一行的 , 所以它们三个之所以浮动后在同一个显示 , 就是后面的浮动元素受到前面浮动元素的影响导致的 . 建议同学自己实际的去练习一下 , 来帮助同学更好的理解 . 加油 !

祝学习愉快 ,望采纳 .

收起回答

提问者阿扬在自律路上 #1

灰灰老师，这不是因为他们自身设置了浮动属性才有的结果吗？如果自身没有设置，受其他浮动元素的影响，是不是是体现在会占据浮动元素的空间？

2019-01-04 11:36:19
好帮手慕夭夭回复提问者阿扬在自律路上 #2

同学理解的是对的 .

2019-01-04 11:49:01
提问者阿扬在自律路上回复好帮手慕夭夭 #3

所以在自身没有设置浮动属性的情况下，要清楚浮动的影响，就只要单独加上clear属性，不用说同时存在float和clear两个属性，这样理解对吗？如下面的例子：p元素加上clear:left属性，是消除了.red这个浮动元素向左浮动的影响 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <style> body{ font-family: '微软雅黑'; } .per{ width: 400px; height: 200px; border: 1px solid #CCC; } .red{ width: 100px; height: 100px; background: red; margin: 10px; float:left; } p{background:blue; width: 100px; height: 100px; clear:left; } </style> </head> <body> <div class="per"> <div class="red"></div> <p></p> </body> </html>

2019-01-04 11:58:20