前端基礎---浮動(一)
阿新 • • 發佈：2021-07-01
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* 如果希望塊元素在頁面中水平排列,可以使塊元素脫離文件流 使用float來使元素浮動,從而脫離文件流 可選值: none: 預設值,元素預設在文件流中排列 left: 元素會立即脫離文件流,想頁面的左側浮動 right: 元素會立即脫離文件流,想頁面的右側浮動 當為一個元素設定浮動後 元素立即脫離文件流,元素脫離文件流以後,他下面的元素會立即向上移動 元素浮動以後,會盡量向頁面的左上或右上浮動,直到遇到父元素的邊框,或者其他的浮動元素 如果浮動元素上邊是一個沒有浮動的塊元素,則浮動元素不會超過塊元素 浮動的元素不會超過他上邊的兄弟元素,最多一邊齊*/ .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: yellow; } .box3{ width: 200px; height: 200px; background-color: blue; } div{ float: left; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>