css用clearfix清除浮動

最後更新：2017-06-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：and rds absolute height 原理 bsp pen 可見度 style

什麼是.clearfix

.clearfix:after {
  
      content: ".";     /*內容為“.”就是一個英文的句號而已。也可以不寫。*/

    display: block;   /*加入的這個元素轉換為區塊層級元素。*/    clear: both;     /*清除左右兩邊浮動。*/    visibility: hidden;      /*可見度設為隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然佔據空間，只是看不到而已；*/    line-height: 0;    /*行高為0；*/    height: 0;     /*高度為0；*/    font-size:0;    /*字型大小為0；*/

  }
 .clearfix { 
           zoom: 1; 
           /*這是針對於IE6的，因為IE6不支援:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。*/

     } 

<div class="clearfix"> <div class="floated"></div> </div>

上面的代碼就是.clearfix的定義和應用，簡單的說下.clearfix的原理：

1、在IE6, 7下zoom: 1會觸發hasLayout，從而使元素閉合內部的浮動。

2、在標準瀏覽器下，.clearfix:after這個偽類會在應用到.clearfix的元素後面插入一個clear: both的區塊層級元素，從而達到清除浮動的作用。

3、在需要清除浮動的時候，只要寫一個.clearfix就行了，然後在需要清浮動的元素中添加clearfix類名就好了。

<html > <head> <title> css用clearfix清除浮動執行個體</title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <body> <style type="text/css"> /*所有主流瀏覽器都支援 :after 虛擬元素。*/ .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{*+height:1%;}/*不知道有什麼用處，不加ie7也沒有問題*/ .box{ background:#111;width:500px; position:relative;} .l{float:left; background:#333;width:200px; height:100px;} .r{float:right;background:#666;width:200px; height:200px;} .s{width:100px; height:100px;background:#999;position:absolute;right:-50px;;} </style> <div class="box clearfix"> <div class="l">left</div> <div class="r">right</div> <div class="s">absolute</div> </div> </body> </html>

css用clearfix清除浮動

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

css用clearfix清除浮動

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support