<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          clearfix_清除浮動float的多種clearfix方法總匯

          時間:?2017-12-01閱讀:?819標簽:?float

          浮動float是常用的css屬性,可以設置左浮動float:left;右浮動float:right;不浮動float:none;浮動會影響到前后標簽 、引起父容器塌陷,導致頁面布局出錯等問題。這篇文章就整理清除float的多種方法:


          1.使用overflow屬性

          .clearfix{
             overflow:hidden;width:100%;
          }

          在浮動元素的父元素添加該屬性,必須定義width或者zoom:1,同時不能定義height。overflow的hidden屬性會讓瀏覽器會自動檢查浮動區域的高度,

          缺點:不能和position配合使用,因為超出的尺寸的會被隱藏。高度不能定義,只能默認根據子元素的高度。


          當然除了還可以使用overflow:auto屬性,如下:

          .clearfix{
             overflow:auto;_height:1%
          }

          _height:1%只有ie才認識,在父元素的屬性上加上overflow:auto;_height:1%; 父元素閉合的問題就ok了 


          2.使用額外標簽

          .clearfix{
             clear:both;height:0;overflow:hidden;
          }

          在浮動的元素后面再放一個標簽,該標簽添加clearfix的樣式來清除浮動。

          缺點:采用這種方式會額外添加html的標簽,容易造成結構的混亂。


          3.使用偽元素

          .clearfix:after{
                content:"";display:block;height:0;clear:both;visibility:hidden
          }
          .clearfix{
             *+height:1%;
          }
          /*兼容IE,或者.clearfix{zoom:1;}*/

          在浮動的元素上添加樣式clearfix,這是目前比較推薦的寫法。


          4.其它方法

          1、給父元素加display:inline-block;
          2、給父元素添加高度;
          3、給父元素也加浮動;
          4、浮動元素下加<br clear="all"/>  

          當然這些方法并不是我們常用的,有很多的缺點,就不一一列舉了


          總結:

          以上就是清除浮動方法的總結,推薦使用方法前三中方法,通過這些知識能解決在工作學習中遇到到浮動問題,相信能幫我們更好的理解浮動。

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/209

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网