四个方块是由上到下排列的,本次需要运用float属性和清除浮动特性。因为div是块元素需要独占一行,上面红黄两个色块添加浮动;如果没有给绿色块添加浮动,此时会上移被红块所覆盖;绿色块需要存在红色块下方,所以要清除浮动,后面在给绿蓝添加 float:left;就能看到效果。
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title></title> <style type="text/css"> #red{ width: 200px; height: 200px; background: red; float:left; } #yellow{ width: 200px; height: 200px; background: yellow; float:left; } #green{ width: 200px; height: 200px; background: green; clear:left;/*清楚浮动,不然绿块会上移被红块覆盖住*/ float:left; } #blue{ width: 200px; height: 200px; background: blue; float:left; } </style> </head> <body> <div id="red"></div> <div id="yellow"></div> <div id="green"></div> <div id="blue"></div> </body> </html>
效果图:
演示效果传送门:JSbin
回顾下清除浮动的几种方式:
1、父级div定义height
2、在结尾处添加空div(<br>标签clear:both
3、父级div定义伪类:after和zoom
4、父级div定义overflow:hidden
5、父级div定义overflow:auto
详情传送门:https://www.cnblogs.com/nxl0908/p/7245460.html