第三十节 浮动 

 1 <!-- 浮动特性：
 2         1、浮动元素有左浮动和有浮动两种
 3         2、浮动的元素会向左或向右浮动，碰到父元素边界或者其他元素才停下来
 4         3、相邻浮动的块元素可以并在一行，超出父元素的宽度就换行
 5         4、浮动让行内元素或者块元素自定转化成行内块元素（此时不会有行内块元素间隙问题）
 6         5、浮动元素如果没有设置尺寸（一般是高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
 7         6、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字绕图的效果
 8         7、浮动元素之间没有垂直的margin合并
 9      清除浮动：即一般不设置高度，会出现子元素撑不开父元素的宽度，所以需要清除浮动的功能。
10          1、父级元素上增加属性overflow：hidden
11          2、在最后一个子元素的后面加一个空的div，给他样式属性clear：both（不推荐） 
12          3、使用成熟的清浮动样式类，clearfix
13              .clearfix:after,.clearfix:before{content:"";display:table;}  将top塌陷合并在一起
14              .clearfix:after{clear:both;}  再单独写清除浮动的属性
15              .clearfix{zoom:1}  IE浏览器只能用这个，zoom是指缩放浏览器，1即不放大也不缩小
16          清除浮动的使用方法：
17              .con2{... overflow:hidden}
18              <div class="con2 clearfix">-->
19 <!DOCTYPE html>
20 <html lang="en">
21 <head>
22     <meta charset="UTF-8">
23     <title>Document</title>
24     <style type="text/css">
25         <!-- 两端对齐样式 -->
26         .box{
27             width: 400px;
28             height: 80px;
29             border: 1px solid gold;
30             margin: 50px auto 0;
31         }
32         .box div{
33             width: 60px;
34             height: 60px;
35             margin: 10px;
36         }
37         
38         .box1{
39             background-color: green;
40             float: left;
41         }
42 
43         .box2{
44             background-color: pink;
45             float: right;
46         }
47         
48         /* 九宫格样式 */
49         .con{
50             width: 400px;
51             height: 400px;
52             border: 1px solid black;
53             margin: 50px auto 0;
54         }
55 
56         .con div{
57             width: 100px;
58             height: 100px;
59             float: left;
60             background-color: gold;
61             margin: 15px;
62 
63         }
64     </style>
65 </head>
66 <body>
67     <div class="box">
68         <div class="box1"></div>
69         <div class="box2"></div>
70     </div>
71 
72     <!-- .con>div{$}*9 -->
73     <div class="con">
74         <div>1</div>
75         <div>2</div>
76         <div>3</div>
77         <div>4</div>
78         <div>5</div>
79         <div>6</div>
80         <div>7</div>
81         <div>8</div>
82         <div>9</div>
83     </div>
84 </body>
85 </html>

 

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