1.float
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>float</title> 6 7 <style> 8 body{ 9 border-style:solid; 10 border-size:3px; 11 } 12 .div1{ 13 width:100px; 14 height:100px; 15 background-color:red; 16 float:left; 17 } 18 .div2{ 19 width:100px; 20 height:100px; 21 background-color:green; 22 float:left; 23 } 24 .div3{ 25 width:200px; 26 height:200px; 27 background-color:gray; 28 } 29 </style> 30 </head> 31 <body> 32 <! 33 目的：如何在一行显示多个div元素 34 --正常文档流：将元素（标签）在进行排版布局的时候按着 从上到下 从左到右的顺序排版的一个布局流 35 脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局 36 float：浮动,最好用float，如果有文本，会被挤出去。对于文本来说是不完全文档流 37 position:absolute fixed定位（完全脱离） 38 --> 39 <div class="div1"></div> 40 <div class="div2"></div> 41 <div class="div3"></div> 42 </body> 43 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>clear</title> 6 7 <style> 8 .div1{ 9 width:100px; 10 height:100px; 11 background-color:red; 12 float:left; 13 } 14 .div2{ 15 width:100px; 16 height:100px; 17 background-color:green; 18 float:left; 19 } 20 .div3{ 21 width:200px; 22 height:200px; 23 background-color:gray; 24 clear:both; 25 } 26 </style> 27 </head> 28 <body> 29 <!--clear就是清除float元素，可以设置左右两边不能有浮动元素--> 30 <div class="div1"></div> 31 <div class="div2"></div> 32 <div class="div3"></div> 33 </body> 34 </html>
2.position
fixed
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>position</title> 6 7 <style> 8 .div1{ 9 height:1500px; 10 background-color:green; 11 } 12 .div2{ 13 height:1500px; 14 background-color:yellow; 15 } 16 a{ 17 position:fixed; 18 bottom:20px; 19 right:20px; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="div1"></div> 25 <div class="div2"></div> 26 <!--position:absolute fixed 定位（完全）--> 27 <a >返回顶部</a> 28 </body> 29 </html>