浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动。例如
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .fa { background-color: red; width: 600px; /* height: 600px; */ } .son1 { width: 200px; height: 200px; background-color: aqua; float: left; } .son2 { width: 300px; height: 200px; background-color: pink; float: left; } .div2 { width: 700px; height: 100px; background-color: orange; } </style> </head> <body> <div class="fa">aaa <div class="son1"></div> <div class="son2"></div> </div> <div class="div2"></div> </body> </html>