1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 </script> 9 10 <style type="text/css"> 11 /* 12 块元素在文档流中默认垂直排列 13 如果希望块元素水平排列，可以使块元素脱离文档流 14 使用float使元素浮动，从而脱离文档流 15 可选值 16 none 默认值，元素默认在文档流中排列 17 left 元素会立即脱离文档流，向页面的左侧浮动 18 right 元素会立即脱离文档流，向页面的右侧浮动 19 当一个元素设置浮动非none后 20 元素会立即脱离文档流，而下边的元素会立即向上移动 21 元素浮动以后会尽量向左上或右上移动，直到遇到父元素的边框或者其他的浮动元素 22 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素 23 浮动的元素不会超过上边的兄弟元素，最多一边齐 24 */ 25 .box1{ 26 width: 100px; 27 height: 100px; 28 background-color: red; 29 float: left; 30 } 31 .box2{ 32 width: 100px; 33 height: 100px; 34 background-color: yellow; 35 float: left; 36 } 37 .box3{ 38 width: 100px; 39 height: 100px; 40 background-color:green; 41 float: right; 42 } 43 </style> 44 45 </head> 46 <body> 47 <div class="box1"></div> 48 <div class="box2"></div> 49 <div class="box3"></div> 50 </body> 51 </html>
浮动特点
1.浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以通过浮动来设置文字环绕图片的效果。
2.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 </script> 9 10 <style type="text/css"> 11 12 .box1{ 13 14 height: 100px; 15 background-color: skyblue; 16 17 /* 18 在文档流中，子元素的宽度默认占父元素的全部 如果加上float语句则不会输出，因为不在文档流中 块元素高度和宽度随内容撑开，无内容则无宽高
19 当元素设置浮动以后，会完全脱离文档流 20 块元素脱离文档流后，高度和宽度都被内容撑开 21 */ 22 23 } 24 .s1{ 25 /* 26 开启span的浮动 27 内联元素脱离文档流后会变成块元素 28 脱离文档流后不再区分内联和块，全部都是块 29 */ 30 float: left; 31 width: 100px; 32 height:100px; 33 background-color: aqua; 34 } 35 </style> 36 37 </head> 38 <body> 39 <div class="box1"></div> 40 <span class="s1"></span> 41 </body> 42 </html>
