clear: both;
设计父级元素element::after
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Float</title> <style> .one{ width: 100px; height: 100px; background-color: aqua; float: left; } .two{ width: 100px; height: 100px; background-color: burlywood; float: left; } .three{ width: 100px; height: 100px; background-color: chartreuse; float: left; } .four{ margin-top: 180px; width: 200px; height: 200px; background-color: rgb(143, 21, 27); clear: both; } .container{ background-color: gray; } .container::after{ content: ''; display: block; clear: both; } </style> </head> <body> <div class="container"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> <div class="four"></div> </body> </html>
这是关键！
