第五篇：web以前端之float的幾種清除浮動方式

時間  2019-11-16
標籤 第五 web 前端 float 幾種 清除 浮動 方式 欄目 HTML 简体版
原文   原文鏈接

前端之float的幾種清除浮動方式

 

前端之float的幾種清除浮動方式

本節內容

  • 1.float清除方式1
  • 2.float清除方式2
  • 3.float清除方式3
  • 4.float清除方式4

1.float清除方式1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<! DOCTYPE  html>
< html  lang="en">
< head >
     < meta  charset="UTF-8">
     < title >Title</ title >
     < style >
         .content{
             background: red;
         }
         .left{
             float: left;
             height: 200px;
             width: 200px;
             background: black;
             border: 1px solid red;
         }
     </ style >
</ head >
< body >
     < div  class="content">
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
     </ div >
     < div  style="clear: both">asdf</ div >
</ body >
</ html >

　　

在父div的下面div中設置clear:both方式，content的div沒有被撐起來，高度仍是0，可是下面的asdf排在了最下面，缺點是外部的div高度爲0，則外部div的顏色屬性沒法展現出來。html

2.float清除方式2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<! DOCTYPE  html>
< html  lang="en">
< head >
     < meta  charset="UTF-8">
     < title >Title</ title >
     < style >
         .content{
             background: red;
         }
         .left{
             float: left;
             height: 200px;
             width: 200px;
             background: black;
             border: 1px solid red;
         }
     </ style >
</ head >
< body >
     < div  class="content">
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  style="clear: both"></ div >
     </ div >
     < div >asdf</ div >
</ body >
</ html >

　　

在全部浮動標籤的最後一個標籤後面加上一個空標籤，裏面的style設置爲clear:both，這樣就把父div撐起來了。可是若是想在父div中添加新的浮動標籤將可能出現問題，由於append新元素進去以後，空標籤可能就不在最後一個位置了。前端

3.float清除方式3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<! DOCTYPE  html>
< html  lang="en">
< head >
     < meta  charset="UTF-8">
     < title >Title</ title >
     < style >
         .content{
             background: red;
         }
         .left{
             float: left;
             height: 200px;
             width: 200px;
             background: black;
             border: 1px solid red;
         }
 
     </ style >
</ head >
< body >
     < div  class="content" style="overflow: hidden">
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
     </ div >
     < div >asdf</ div >
</ body >
</ html >

　　

在父標籤中設置style爲overflow: hidden也能將父標籤撐起來，hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，可是他是浮動在普通流之上的，能夠把普通流元素+浮動元素想象成一個立方體。若是沒有明確設定包含容器高度的狀況下，它要計算內容的所有高度才能肯定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。web

4.float清除方式4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<! DOCTYPE  html>
< html  lang="en">
< head >
     < meta  charset="UTF-8">
     < title >Title</ title >
     < style >
         .content{
             background: red;
         }
         .left{
             float: left;
             height: 200px;
             width: 200px;
             background: black;
             border: 1px solid red;
         }
         .clearfix:after{
             content: ".";  /*設置內容，必須有內容，沒有，則沒法實現效果*/
             visibility: hidden;  /*將標籤隱藏*/
             height:0;  /*設置標籤的高度爲0*/
             display: block;  /*設置標籤爲塊級標籤*/
             clear: both;  /*設置清除float浮動*/
         }
     </ style >
</ head >
< body >
     < div  class="content clearfix">
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
         < div  class="left"></ div >
     </ div >
     < div >asdf</ div >
</ body >
</ html >

　　

第四種方式是在父標籤上面建一個僞類，設置如上面那樣，這樣將可以撐起父div標籤，而且動態在裏面添加float標籤將不會影響父標籤的撐開。app

推薦使用這種方式

 
分類:  web
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程