欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

DIV+CSS 清除浮動常用方法總結

  發(fā)布時間：2016-05-06 15:10:41   作者：佚名   我要評論
下面小編就為大家?guī)硪黄狣IV+CSS 清除浮動常用方法總結。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

DIV+CSS 清除浮動是頁面布局中常見的問題，相信各位高手也都有自己的方法，今天在這里對常見的幾種方法進行總結（PS：談不上是原創(chuàng)，這里是我自己做的歸納總結，也是我自己內(nèi)化的過程），希望對您能夠有所幫助。 

DIV+CSS 浮動效果是指，父元素在未定義高的情況下，由于子元素全部浮動脫離文本流，而造成父元素高的塌陷（PS:正常情況下，父元素的高是由子元素撐起來）；或者因為部分子元素的而浮動，脫離文本流而造成其他元素的布局錯亂的情況。

DIV+CSS 清除浮動 常見的方法如下：

1、給未加浮動的子元素的CSS添加 clear: both;若子元素都有浮動時，可以新增加一個空的子元素，并且給其的CSS添加 clear: both;這樣可以利用清除左右浮動的子元素重新?lián)纹鸶冈氐母撸瑥亩_到清除浮動的效果。代碼及效果如下：

CSS Code復制內(nèi)容到剪貼板
  1. <style type="text/css">    
  2. .fl{float:left;}    
  3. .demo{background:#ccc;}    
  4. .item1{background:#F571E3;height:100px;width:100px;}    
  5. .item2{background:#21B2F7;height:200px;width:100px;clear: both;}    
  6. </style>    
  7. </head>    
  8. <body>    
  9.     <h2>用 clearfix 清除浮動</h2>    
  10.     <div class="demo">    
  11.         <div class="fl item1"></div>    
  12.         <div class="item2"></div>    
  13.     </div>    
  14. </body>  

清除浮動前，item1左浮動的效果（此時父元素的高是被未浮動的item2元素的高撐開）：

清除浮動前，item1右浮動的效果（此時父元素的高是被未浮動的item2元素的高撐開）：

清除浮動后的效果（因為DIV是塊級元素，會獨占一行，所以item2會在下面一行，此時父元素的高是被item1元素和item2元素的高撐開）：

2、子元素全部浮動時，給父元素的CSS添加 overflow: hidden;（子元素沒有全部浮動時，不浮動的元素會撐開父元素的高，但是由于浮動元素造成的布局應該再利用padding進行修改），但是此方法父元素不能改使用position進行定位，否則不起作用。代碼及效果如下：

CSS Code復制內(nèi)容到剪貼板
  1. <style type="text/css">    
  2. .fl{float:left;}    
  3. .demo{background:#ccc;overflow: hidden;}    
  4. .item1{background:#F571E3;height:100px;width:100px;}    
  5. .item2{background:#21B2F7;height:200px;width:100px;}    
  6. </style>    
  7. </head>    
  8. <body>    
  9.     <div class="demo">    
  10.         <div class="fl item1"></div>    
  11.         <div class="fl item2"></div>    
  12.     </div>    
  13. </body>  

清除浮動前的效果，由于父元素的高塌陷，所以背景 background:#ccc; 沒有起效果：

 

清除浮動后的效果：

3、給父元素加 偽類:after 和 zoom，代碼及效果如下：

CSS Code復制內(nèi)容到剪貼板
  1. <style type="text/css">    
  2. .fl{float:left;}    
  3. .demo{background:#ccc;zoom: 1;}    
  4. .demo:after{display:block;clear:both;content:"";visibility:hidden;height:0}   
  5. .item1{background:#F571E3;height:100px;width:100px;}    
  6. .item2{background:#21B2F7;height:200px;width:100px;}    
  7. </style>    
  8. </head>    
  9. <body>    
  10.     <div class="demo">    
  11.         <div class="fl item1"></div>    
  12.         <div class="fl item2"></div>    
  13.     </div>    
  14. </body>  

清除浮動前的效果，由于父元素的高塌陷，所以背景 background:#ccc; 沒有起效果：


清除浮動后的效果：

4、如果是在使用bootstrapt，則可以給其父元素添加class 為 clearfix 的類，代碼及效果如下：

CSS Code復制內(nèi)容到剪貼板
  1. <style type="text/css">    
  2. .fl{float:left;}    
  3. .demo{background:#ccc;}    
  4. .item1{background:#F571E3;height:100px;width:100px;}    
  5. .item2{background:#21B2F7;height:200px;width:100px;}    
  6. </style>    
  7. </head>    
  8. <body>    
  9.     <div class="demo clearfix">    
  10.         <div class="fl item1"></div>    
  11.         <div class="fl item2"></div>    
  12.     </div>    
  13. </body>  

清除浮動后的效果：

以上方法各有利弊，大家可以根據(jù)自己的理解選擇使用，還有一些其他的清除浮動的方法，例如讓父元素浮動、讓父元素 display:table 等等其他，個人并不推薦使用。

以上這篇DIV+CSS 清除浮動常用方法總結就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/Lily-nercel/archive/2016/05/06/5465592.html

相關文章

  • 清除css浮動的三種方法小結

    這篇文章主要介紹了清除css浮動的三種方法小結,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-19

  • 詳解css清除浮動float的七種常用方法總結和兼容性處理

    這篇文章主要介紹了詳解css清除浮動float的七種常用方法總結和兼容性處理,非常具有實用價值，需要的朋友可以參考下
    2017-09-11

  • 淺談css中浮動和清除浮動帶來的影響

    這篇文章主要介紹了淺談css中浮動和清除浮動帶來的影響，通過代碼示例和圖片展示詳細介紹講解了浮動的應用和實現(xiàn)效果,需要的朋友可以參考下
    2017-08-14

  • CSS清除浮動方法小結

    本文主要介紹了CSS解決浮動，清除浮動的幾種方法：1、設置父元素高度；2、overflow；3、增加子元素（塊級），并且設置其clear屬性值為both來解決（隔墻法、內(nèi)墻法）；4、使
    2017-03-22

  • 詳解CSS中zoom屬性或overflow:auto屬性清除浮動的作用

    這篇文章主要為大家介紹了CSS中zoom屬性或overflow:auto屬性清除浮動的作用,文中通過實例代碼介紹的很詳細，相信會對大家的理解和學習具有一定的參考借鑒價值，有需要的朋
    2016-11-26

  • 關于清除浮動塌陷的幾種方法總結

    在大家在使用css的過程中，多多少少會遇到清除浮動這個問題。所以這篇文章給大家總結了div+css中關于清除浮動塌陷的4種方法，相信會對大家學習或者使用div+css能有所幫助，
    2016-10-17

  • 淺談CSS中的clear清除浮動

    下面小編就為大家?guī)硪黄獪\談CSS中的clear清除浮動。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06

  • CSS清除浮動的方法詳解

    這篇文章主要介紹了CSS清除浮動的方法詳解,值得注意的是并不是每次單純把浮動清除掉就可以解決相關問題,文中最后談到的閉合浮動的方案也非常值得一試,需要的朋友可以參考下
    2016-05-30

  • CSS浮動所產(chǎn)生的內(nèi)容溢出問題及清除浮動的方法小結

    CSS的float浮動效果在一些情況下非常不穩(wěn)定,控制不好的時候一般還是清除浮動為妙,這里我們就來看一下CSS浮動所差生的內(nèi)容溢出問題及清除浮動的方法小結
    2016-05-30

  • Css實現(xiàn)清除浮動的方法匯總

    這篇文章主要介紹了Css實現(xiàn)清除浮動的方法匯總,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-07-11

最新評論