one
<!doctype html> <html> <body> <div style="border: 2px solid chartreuse;margin-top: 20px"> <p>我是div111</p> </div> </body> </html>two
<!doctype html> <html> <style> .big { border: 4px solid red; position: relative; width: 100%; height: 600px; margin-top: 20px } /*对big标签的所有子元素都向右浮动*/ .big > * { float: left; margin-left: 20px; } /*清除浮动*/ .big:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .two{ border:4px solid #fcff32; width: 200px; height: 200px; float: left; margin-top: 10px } </style> <body> <div class="big"> <strong>我是大的容器</strong> <div class="two"> <p>我是div222</p> </div> </body> </html>three
<!doctype html> <html> <body> <div style="border: 2px solid #27fffc;width: 500px;float: left;height: 500px;margin-top: 10px"> <p>我是div333</p> </body> </html>four
<!doctype html> <html> <head> </head> <body> <div style="border: 2px solid #212fff;margin-top: 10px" > <p>我是div444</p> </div> </body> </html>five
<!doctype html> <html> <style> #five{ border: 2px solid #b328ff; position: absolute; clear: both; float: right; margin-left: 410px; margin-top: -50px; } </style> <body> <div id="five" > <p>我是div555</p> </div> </div> </div> </body> </html>five_2
<!doctype html> <html> <body> <div style="border: 2px solid #b328ff;position: absolute;float: right"> <p>我是被复用的div555</p> </div> </div> </div> </body> </html>效果：
