第三十一节 浮动实例，文字绕图 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .box{
 8             width: 450px;
 9             /*height: 210px;*/
10             border: 1px solid #000;
11             margin: 50px auto 0;
12             overflow: auto;
13         }
14 
15         .box1{
16             width: 100px;
17             height: 100px;
18             float: left;
19             background-color: gold;
20             margin: 10px;
21             margin-bottom: 0px;
22         }
23 
24         .box2{
25             font-size: 14px;
26             color: #666;
27             margin: 10px;
28             line-height: 22px
29 
30 
31         }
32     </style>
33 </head>
34 <body>
35     <div class="box">
36         <div class="box1"></div>
37         <div class="box2">1、浮动元素有左浮动和有浮动两种 <br />
38         2、浮动的元素会向左或向右浮动，碰到父元素边界或者其他元素才停下来 <br/ >
39         3、相邻浮动的块元素可以并在一行，超出父元素的宽度就换行 <br/ >
40         4、浮动让行内元素或者块元素自定转化成行内块元素（此时不会有行内块元素间隙问题）<br/ >
41         5、浮动元素如果没有设置尺寸（一般是高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动<br/ >
42         6、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字绕图的效果 <br/ ></div>
43     </div>
44 </body>     
45 </html>

 

posted @ 2020-03-05 23:17  kog_maw  阅读(124)  评论(0)    收藏  举报