布局屬性之浮動
阿新 • • 發佈：2018-06-09
.aspx 標準 clas pos meta F5 ext 顯示 charset 
編輯本博客
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局屬性浮動</title> <style type="text/css"> *{ padding:0; margin:0; } .box1{ width:50px; height:50px; background-colorView Code:red; float:left; } .box2{ width:50px; height:50px; background-color:green; float: right; } </style> </head> <body> <div class="box1"> </div> <div class="box2"></div> </body> </html>
塊級元素到一行顯示，並且都可設置寬和高
脫標
即脫離標準文檔流
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動脫標</title> <style type="text/css"> .box1{ width:80px; height:80px; background-colorView Code:red; float: left; } .box2{ width:100px; height:100px; background-color:yellow; } </style> </head> <body> <div class="box1">小紅</div> <div class="box2">小黃</div> </body> </html>
小紅設置了浮動，脫離了文檔標準流，這時小黃就是第一個元素，所以渲染到了最上面
相互貼靠
有字圍效果
緊湊效果
布局屬性之浮動