<!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-color: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-color:red; float: left; } .box2{ width:100px; height:100px; background-color:yellow; } </style> </head> <body> <div class="box1">小红</div> <div class="box2">小黄</div> </body> </html>
小红设置了浮动，脱离了文档标准流，这时小黄就是第一个元素，所以渲染到了最上面
原文：https://www.cnblogs.com/yaya625202/p/9159488.html
