前端之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的顏色屬性無法展示出來。

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，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。

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標簽將不會影響父標簽的撐開。

推薦使用這種方式