Matters needing attention
Do not float vertically displayed boxes, only side-by-side boxes should float.
The big box carries the little box
To build the layout of the web page, first of all, the whole web page is segmented into large blocks, floating Settings, and then segmented into small blocks for floating Settings.
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style> * {margin:0; padding:0; } header { width:1000px; height:100px; margin:0 auto; /* background-color:#333; */ } .content { width:1000px; height:500px; margin:20px auto; /* background-color:#333; */ } footer { width:1000px; height:100px; margin:20px auto; background-color:#333; } header .logo { float:left; width:220px; height:100px; background-color:orange; } header .login { float:right; width:220px; height:30px; background-color:orange; } nav { float:right; width:600px; height:50px; background-color:green; margin-top:20px; } .content .ad { float:left; width:300px; height:500px; background-color:rgb(0, 255, 149); } .content main { float:right; width:680px; height:500px; /* background-color:steelblue; */ } .content main .banner { width:680px; height:380px; background-color:orange; } .content main .pics { width:680px; height:100px; /* background-color:orange; */ margin-top:20px; } .content main .pics ul { list-style:none; } .content main .pics ul li { float:left; width:160px; height:100px; background-color:blue; margin-right:10px; } .content main .pics ul li:last-child { width:170px; margin-right:0; } </style> </head> <body> <header> <div class="logo"></div> <div class="login"></div> <nav></nav> </header> <section class="content"> <aside class="ad"></aside> <main> <div class="banner"></div> <div class="pics"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </main> </section> <footer></footer> </body> </htmlCopy the code