css浮動產生和清除浮動的幾種方式

時間 2020-04-29

標籤 css 浮動產生清除幾種方式欄目 CSS 简体版

原文原文鏈接

浮動的語法：float:left/right;html

浮動float的本來設計了做用初衷是爲了實現文字環繞效果瀏覽器

浮動產生負做用：spa

　　　　一、背景不能顯示設計

　　　　二、邊框不能撐開父元素code

　　　　三、margin padding設置值不能正確顯示htm

浮動以後會使父元素內的子元素漂浮在父元素上方，形成父元素邊框重疊。因此須要清除浮動來使子元素撐開父元素。對象

簡單來講浮動是由於使用了float:left或float:right或二者都是會產生的浮動。blog

何時使用清除浮動呢？當父元素沒有設置寬度或者高度的時，又須要子元素撐開父元素的時候使用清除浮動。it

演示:io

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮動反作用</title>
 6     <style>
 7  .container{
 8  margin:40px auto;
 9  width:400px;
10  border:5px solid grey;
11  background: yellow;　　　　/*背景不能顯示*/
12         }
13  .left{float:left;width:200px;height:100px;border: 1px solid red;}
14  .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}  /*邊框不能撐開父級元素*/
15     </style>
16 </head>
17 <body>
18     <div class="container"> 
19         <div class="left">left浮動</div> 
20         <div class="right">right浮動</div>
21     </div>
22 </body>
23 </html>

結果顯示：

原本倆個紅色對象是在父級元素灰色盒子內的，可是由於對倆個紅色盒子使用了float浮動，因此倆個盒子產生了浮動致使灰色盒子不能撐開，這樣浮動就產生了。

爲了解決上面的浮動產生的反作用，本人總結了如下幾個清除浮動的方式：

1.clear:both清除浮動

HTML代碼：

1     <div class="container"> 
2         <div class="left">left浮動</div> 
3         <div class="right">right浮動</div>
4         <div class="clear"></div>
5     </div>

具體CSS代碼：

 1  <style>  2  .container{
 3  margin:40px auto;
 4  width:400px;
 5  border:5px solid grey;
 6  background: yellow;/*背景正常顯示*/
 7         }
 8  .left{float:left;width:200px;height:100px;border: 1px solid red;}
 9  .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}  /*邊框能撐開*/
10  .clear{clear:both;}
11  </style>

結果顯示：

父級背景以及邊框也能正常顯示和撐開了，優勢方便使用，缺點是會多加HTML空標籤

2.使用after僞元素清除浮動（推薦使用）

優勢：無需額外的標籤，瀏覽器兼容性好，是目前用的最多的一種清除浮動的方法之一，企業都在用；

缺點：ie6-7不支持僞元素：after，使用zoom:1觸發hasLayout.

HTML代碼：

1     <div class="container"> 
2         <div class="left">left浮動</div> 
3         <div class="right">right浮動</div>
4     </div>

CSS代碼：

 1  <style>  2  .container{
 3  width:400px;
 4  border:5px solid grey;
 5  background: yellow;
 6         }
 7  .left{float:left;width:200px;height:100px;border: 1px solid red;}
 8  .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}  
 9  .container:after{
10  content:"";
11  display: block;
12  clear:both;
13         }
14  .container{ *zoom: 1;    /*ie6清除浮動的方式 *號只有IE6-IE7執行，其餘瀏覽器不執行*/ }
15  </style>