css清除浮動的三種方式
阿新 • • 發佈:2019-02-04
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮動</title> <style type="text/css"> .con,.con2{ width:300px; border:1px solid #000; margin:100px auto 0; font-size:0; height:200px; } .con a{ width:50px; height:50px; display:inline-block; background-color:gold; font-size:16px; margin:10px; text-align:center; line-height:50px; text-decoration:none; } .con2 a{ width:50px; height:50px; background-color:gold; font-size:16px; margin:10px; text-align:center; line-height:50px; text-decoration:none; float:left; } </style> </head> <body> <div class="con"> <a href="">1</a> <a href="">1</a> <a href="">1</a> <a href="">1</a> <a href="">1</a> <a href="">1</a> <a href="">1</a> <a href="">1</a> </div> <div class="con2"> <a href="">12</a> <a href="">12</a> <a href="">12</a> <a href="">12</a> <a href="">12</a> <a href="">12</a> <a href="">12</a> <a href="">12</a> </div> </body> </html>