css清除浮動

為什麼要清除浮動：清除浮動的本質主要是為了解決父級元素由於子級浮動引起內部高度為0 的情況

例如下面程式碼，沒有使用清除浮動的效果

<div class="father clearfix">
     <div class="big"></div>
	 <div class="small"></div>
</div>
<div class="footer"></div>  


.father {
		border: 1px solid red;
		width: 300px;
		}
			
.big {
		width: 100px;
		height: 200px;
		background-color: purple;
		float: left;
	 }
			
.small {
		width: 80px;
		height: 80px;
		background-color: peru;
		float: left;
		}
.footer {
		width: 400px;
		height: 100px;
		background-color: pink;
		}

清除浮動的方法：

1. 額外標籤法:通過在浮動元素的最後一個元素的末尾新增一個空的標籤 ,再清除浮動clear:both
2. 父級新增overflow屬性方法：直接在父親上新增overflow: hidden
3. 使用after偽元素清除浮動：給父級元素加clearfix類，然後直接在css中寫這些如下程式碼：

   .clearfix:after {
   				/*正常瀏覽器 清除浮動*/
   				content: "";
   				display: block;
   				height: 0;
   				clear: both;
   				visibility: hidden;
   			}
   			
   			.clearfix {
   				*zoom: 1;
   				/*zoom 1 就是ie6 清除浮動方式  *  ie7一下的版本所識別*/
   			}

4. 使用before和after雙偽元素清除浮動：給父級元素加clearfix類，然後直接在css中寫如下程式碼：          

    .clearfix:before,.clearfix:after{
                   content: "";
                   display: table;
               }
               .clearfix:after{
                   clear: both;
               }
               .clearfix{
                   *zoom:  1;
               }

   使用上述的清除浮動的正常效果如下圖：

想知道浮動更詳細的內容，點選後面連結：https://www.cnblogs.com/smyhvae/p/7297736.html