时间：2023-09-20 10:18:01 | 来源：网站运营
时间：2023-09-20 10:18:01 来源：网站运营
传统网页布局三种方式：
在线咨询
<!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>Document</title> <style> .father { width: 800px; background-color: black; font-size: 50px; margin: 0 auto; } .test1 { width: 200px; height: 200px; float: left; background-color: red; } .test2 { clear: left; } .test3 { width: 400px; height: 400px; background-color: blue; } </style></head><body> <div class="father"> <div class="test1"></div> <div class="test2"></div> <div class="test3"></div> </div> </body></html><!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>Document</title> <style> .father { overflow: hidden; width: 800px; background-color: black; font-size: 50px; margin: 0 auto; } .test1 { width: 200px; height: 200px; float: left; background-color: red; } .test3 { width: 400px; height: 400px; background-color: blue; } </style></head><body> <div class="father"> <div class="test1"></div> <div class="test3"></div> </div> </body></html><!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>Document</title> <style> .clearfix::after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7专有*/ *zoom: 1; } .father { width: 800px; background-color: black; font-size: 50px; margin: 0 auto; } .test1 { width: 200px; height: 200px; float: left; background-color: red; } .test3 { width: 400px; height: 400px; background-color: blue; } </style></head><body> <div class="father clearfix"> <div class="test1"></div> <div class="test3"></div> </div></body></html><!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>Document</title> <style> .clearfix::before,.clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { /* IE6、7专有*/ *zoom: 1; } .father { width: 800px; background-color: black; font-size: 50px; margin: 0 auto; } .test1 { width: 200px; height: 200px; float: left; background-color: red; } .test3 { width: 400px; height: 400px; background-color: blue; } </style></head><body> <div class="father clearfix"> <div class="test1"></div> <div class="test3"></div> </div></body></html>关键词：方式,布局,传统
