清除浮动
CSS样式中有浮动的情况下,一般都不希望正常的文档流显示的内容被盖住,所以有浮动的情况下,会紧跟着后面加一个div清除浮动。
.clear{ width: 0px; height: 0px; clear:both; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style type="text/css"> .div1{ width: 200px; height: 200px; background-color: green; float: left; } .div2{ width: 200px; height: 200px; background-color: red; float: left; } .div3{ width: 500px; height: 500px; background-color: gray; } .clear{ width: 0px; height: 0px; clear:both; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="clear"></div> <div class="div3"></div> </body> </html>