css--浮动/清除浮动

 

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

浮动特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来

3、相邻浮动的块元素可以并在一行，超出父级宽度就换行

4、浮动让行内元素或块元素自动转化为行内块元素

5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动

7、浮动元素之间没有垂直margin的合并

清除浮动

  • 父级上增加属性overflow：hidden
  • 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
  • 使用成熟的清浮动样式类，clearfix 
    .clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
    清除浮动的使用方法： 
    .con2{... overflow:hidden}
或者
<div class="con2 clearfix">

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>文字绕图</title>
 9 
10     <style type="text/css">  /* 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果*/
11         .con{
12             width:400px;
13             height:400px;
14             border:1px solid black;
15             margin:100px auto 0;
16         }
17 
18         .pic{
19             width:100px;
20             height:100px;
21             background-color:gold;
22             float:left;  /* 左浮动*/
23             margin:0 15px 5px 0;
24         }
25 
26         .duanluo{     /* 没有浮动*/
27             width:400px;
28             height:240px;
29             background-color:blue;
30         }
31 
32     </style>
33 </head>
34 <body>
35 
36 <div class="con">
37     <div class="pic"></div>
38     <div class="duanluo">
39         1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
40 
41 2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
42 
43 3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
44 
45 4、浮动让行内元素或块元素自动转化为行内块元素
46 
47 5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
48 
49 6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动
50 
51 7、浮动元素之间没有垂直margin的合并
52 
53     </div>
54 </div>
55 
56 </body>
57 </html>

 

 

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>清除浮动</title>
 9     
10     <style type="text/css">   /*父元素内整体浮动的子元素无法撑开父元素，需要清除浮动 */
11         .con,.con1{
12             width:300px;
13             /* height:300px; */
14             border:1px solid black;
15             margin:50px auto 0;
16             font-size:0;
17             /* 方法一：overflow:hidden; */
18 
19         }
20 
21         .con a{
22             display:inline-block;
23             width:50px;
24             border:1px solid black;
25             background-color:gold;
26             font-size:16px;
27             margin:10px;
28             text-align:center;
29             line-height:50px;
30             text-decoration:none;
31         }
32 
33         .con1 a{
34             float:left;
35             width:50px;
36             border:1px solid black;
37             background-color:gold;
38             font-size:16px;
39             margin:10px;
40             text-align:center;
41             line-height:50px;
42             text-decoration:none;
43         }
44 
45         /* 方法三：
46         .clearfix:after{
47             content:'';
48             display:table;
49             clear:both
50         } */
51 
52         /*将塌陷和清除浮动结合在一起使用*/
53         .clearfix:before,.clearfix:after{
54             content:'';
55             display:table;
56         }
57         .clearfix:after{clear:both}
58         .clearfix{zoom:1}   /*ie兼容性*/
59 
60     </style>
61 </head>
62 <body>
63 
64 <div class="con">
65     <a href="">1</a>
66     <a href="">2</a>
67     <a href="">3</a>
68     <a href="">4</a>
69     <a href="">5</a>
70     <a href="">6</a>
71     <a href="">7</a>
72     <a href="">8</a>
73 </div>
74 
75 <div class="con1 clearfix">
76     <a href="">1</a>
77     <a href="">2</a>
78     <a href="">3</a>
79     <a href="">4</a>
80     <a href="">5</a>
81     <a href="">6</a>
82     <a href="">7</a>
83     <a href="">8</a>
84     <!--方法二：<div style="clear:both"></div> -->
85 </div>
86 </body>
87 </html>

 

posted on 2019-11-06 23:54  cherry_ning  阅读(106)  评论(0)    收藏  举报

导航