一、float
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>脱离文本流</title> <style> .c1{ height: 100px; width: 100px; background-color: brown; } .c2 { height: 150px; width: 150px; background-color: blueviolet; float: right; } .c3 { height: 200px; width: 200px; background-color: red; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
二、absolute
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>脱离文本流</title> <style> .c1{ height: 100px; width: 100px; background-color: brown; } .c2 { height: 150px; width: 150px; background-color: blueviolet; position: absolute; left: 200px; } .c3 { height: 200px; width: 200px; background-color: red; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
三、fixed
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>脱离文本流</title> <style> .c1{ height: 100px; width: 100px; background-color: brown; } .c2 { height: 150px; width: 150px; background-color: blueviolet; position: fixed; left: 400px; } .c3 { height: 200px; width: 200px; background-color: red; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>