1.浮动
float属性可用值
left：元素向左浮动
right：元素向右浮动
none：元素不浮动
inherit：从父级继承浮动属性
注意：float在绝对定位和display为none时不生效
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; } .one{ height: 150px; background-color: aquamarine; float: left; } .two{ float: left; width: 150px; background-color: pink; } .three{ float: left; background-color: plum; } .container{ width: 300px; height: 300px; background-color: grey; } </style> </head> <body> <div class="container"> <div class="one">i am div1</div> <div class="two">i am div2</div> <div class="three">i am div3</div> helloworld </div> </body> </html>
2.clear属性
去掉浮动属性（包括继承来的属性）
clear属性值：
left，right：去掉元素向左，向右浮动
both：左右两侧均去掉浮动
inherit：从父级继承来clear的值
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .text1{ float: right; position: absolute; background-color: aqua; } .text2{ background-color: pink; } </style> </head> <body> <div class="text1"> 我将出现在屏幕右方 </div> <div class="text2"> 注意我出现的位置 </div> </body> </html>