久久一本二本,情色视频网站

1、是什么浮動(dòng)？

浮動(dòng)是CSS的一種屬性，float會(huì)讓元素左右移動(dòng)，直到它的外邊緣碰到它的包含框或者另一個(gè)浮動(dòng)元素框的邊緣。浮動(dòng)元素不存在于的文檔流中，文檔流中的元素也不會(huì)感知到浮動(dòng)元素的存在。
舉例說(shuō)明：
(1)比如父容器中有三個(gè)子元素分別向左浮動(dòng)，則它的父容器則會(huì)感知不到子元素的存在而形成父容器高度沒(méi)有被撐開(kāi)的現(xiàn)象

<!DOCTYPE html>
<html>
   <head>
       <meta charset = "uft-8">
   
   </head>
   <body>
       <div style="border: solid 5px #0e0; width:300px;" > 
           <div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div> 
           <div style="height: 100px; width: 100px; background-color: Green;float:left; "> </div> 
           <div style="height: 100px; width: 100px; background-color: Yellow;float:left;"> </div> 
       </div>

   </body>
</html>

屏幕快照 2017-02-22 下午4.51.03.png

(2)浮動(dòng)會(huì)對(duì)其后續(xù)的元素的位置產(chǎn)生影響

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="content">
    <div class="menu">側(cè)邊欄固定寬度</div>
    <div class="aside">側(cè)邊欄固定寬度</div>
    <div class="main">內(nèi)容區(qū)塊自適應(yīng)寬度</div>    
  </div>
  <div id="footer">我是 footer，但我的樣式出現(xiàn)了問(wèn)題</div>
  
  <style>
  .aside{
    width: 150px;
    height: 300px;
    background: red;
    float: right;
  }
  .menu{
    width: 150px;
    height: 300px;
    background: red;
    float: left;
  }
  .main{
    margin-right: 160px;
    margin-left: 160px;
    background: blue;
    height: 200px;
  }
  #footer{
    background: grey;
  }
  
  </style>
</body>
</html>

屏幕快照 2017-02-22 下午9.32.25.png

(3)如果包含塊兒太窄無(wú)法容納水平排列的三個(gè)浮動(dòng)元素,那么其它浮動(dòng)塊兒向下移動(dòng)。

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
    
    </head>
    <body>
    <div style="border: solid 5px #0e0; width:250px;">
        <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
        </div>
    </div>

    </body>
</html>

屏幕快照 2017-02-22 下午4.57.32.png

(3)如果浮動(dòng)元素的高度不一樣，向下移動(dòng)時(shí)就會(huì)出現(xiàn)一種卡主了的現(xiàn)象

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
    
    </head>
    <body>
    <div style="border: solid 5px #0e0; width:250px;">
      <div style="height: 120px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
  </div>
    </div>

    </body>
</html>

屏幕快照 2017-02-22 下午5.01.33.png

（4）浮動(dòng)會(huì)讓元素脫離普通流, 如果浮動(dòng)的元素后面有一個(gè)文檔流中元素,那么這個(gè)元素的框會(huì)表現(xiàn)的像浮動(dòng)元素不存在,但是框的文本內(nèi)容會(huì)受到浮動(dòng)元素的影響,會(huì)移動(dòng)以留出空間.

不浮動(dòng)：

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
    
    </head>
    <body>
     <div style="border: solid 5px #0e0; width: 250px;">
      <div style="height: 50px; width: 50px; background-color: Red; "></div>
      <div style="height: 100px; width: 100px; background-color: Green;">
         11111
         111111
         111111
         11111
      </div>
  </div>
    </div>

    </body>
</html>

屏幕快照 2017-02-22 下午5.43.19.png

浮動(dòng)

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
    
    </head>
    <body>
     <div style="border: solid 5px #0e0; width: 250px;">
      <div style="height: 50px; width: 50px; background-color: Red; float:left"></div>
      <div style="height: 100px; width: 100px; background-color: Green;">
         11111
         111111
         111111
         11111
      </div>
  </div>
    </div>

    </body>
</html>

屏幕快照 2017-02-22 下午5.44.46.png

可以看出浮動(dòng)后雖然綠色div布局不受浮動(dòng)影響，正常布局，但是文字部分卻被擠到了紅色浮動(dòng)div外邊。要想阻止行框圍繞在浮動(dòng)元素外邊，可以使用clear屬性，屬性的left，right，both，none表示框的哪些邊不挨著浮動(dòng)框

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
    
    </head>
    <body>
     <div style="border: solid 5px #0e0; width: 250px;">
      <div style="height: 50px; width: 50px; background-color: Red; float:left"></div>
      <div style="height: 100px; width: 100px; background-color: Green; clear:both">
         11111
         111111
         111111
         11111
      </div>
  </div>
    </div>

    </body>
</html>

屏幕快照 2017-02-22 下午5.43.19.png

(5)塊級(jí)元素浮動(dòng)寬度收縮

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box">這是div</div>
  <span>這是span</span>
  
  <style>
  .box{
    float: left;
    background: red;
  }
  span{
    float: left;
    background: blue;
    width: 100px;
    height: 50px;
    margin: 10px;
  };
  
  
  </style>
</body>
</html>

屏幕快照 2017-02-22 下午9.05.28.png

而且行內(nèi)元素浮動(dòng)以塊級(jí)特性呈現(xiàn)，不用再使用display:inline-block;

（6）用浮動(dòng)實(shí)現(xiàn)兩欄布局(邊欄固定，主欄寬度隨窗口大小改變)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="aside">側(cè)邊欄固定寬度</div>
  <div class="main">內(nèi)容區(qū)塊自適應(yīng)寬度</div>
  
  <style>
  .aside{
    width: 150px;
    height: 400px;
    background: red;
    float: left;
  }
  .main{
    margin-left: 160px;
    background: blue;
    height: 400px;
  }
  
  </style>
</body>
</html>

屏幕快照 2017-02-22 下午9.13.40.png

2.清理浮動(dòng)

正如1（1）所講，浮動(dòng)的元素不被文檔流中的元素識(shí)別，導(dǎo)致父容器高度塌陷。因此需要做清理浮動(dòng)的操作
clear屬性：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>JS Bin</title>
</head>
<body>
 <div class="box box1">box1</div>
 <div class="box box2">box2</div>
 <div class="box box3">box3</div>
 
 <style>
   .box{
     width: 100px;
     height: 50px;
     border: 1px solid;
     float: left;
   }
   .box2{
     clear: left;// clear:right 是否有效?
   }
 </style>

</body>
</html>

屏幕快照 2017-02-22 下午9.24.03.png

注意：如果上面的代碼改為clear: right;是無(wú)效的，該屬性只對(duì)自身有效果。

由解決父容器高度塌陷問(wèn)題引出解決浮動(dòng)的幾種方案

（1）在父容器中增加一個(gè)無(wú)意義的標(biāo)簽，并對(duì)這個(gè)標(biāo)簽添加清除浮動(dòng)樣式clear:both

<!DOCTYPE html>
<html>
   <head>
       <meta charset = "uft-8">
   
   </head>
   <body>
    <div style="border: solid 5px #0e0; width:300px;">
     <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
     </div>
     <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
     </div>
     <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
     </div>
     <div style="clear:both"></div>
 </div>

   </body>
</html>

屏幕快照 2017-02-22 下午6.00.11.png

缺點(diǎn)：增加了一個(gè)無(wú)意義的標(biāo)簽

（2）BFC清理浮動(dòng)

BFC的特性

BFC會(huì)阻止垂直外邊距（margin-top、margin-bottom）折疊
按照BFC的定義，只有在同一個(gè)BFC中，兩個(gè)元素（相鄰或者嵌套），只要他們之間沒(méi)有阻擋（邊框，非空內(nèi)容，padding等）才會(huì)發(fā)生margin的重疊。
BFC不會(huì)重疊浮動(dòng)元素
BFC可以包含浮動(dòng)

如何形成BFC，有如下幾種方法：

float為 left或者right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed

總結(jié)：只要使父容器形成一個(gè)BFC，就可以清除浮動(dòng)

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
    
    </head>
    <body>
     <div style="border: solid 5px #0e0; width:300px; overflow:hidden">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>

  </div>

    </body>
</html>

屏幕快照 2017-02-22 下午6.00.11.png

缺點(diǎn)：
使用BFC使用float的時(shí)候會(huì)使父容器長(zhǎng)度縮短，而且還有個(gè)重要缺陷——父容器float解決了其塌陷問(wèn)題，那么父容器的父容器怎么辦？overflow屬性會(huì)影響滾動(dòng)條和絕對(duì)定位的元素；position會(huì)改變?cè)氐亩ㄎ环绞?，這是我們不希望的，display這幾種方式依然沒(méi)有解決低版本IE問(wèn)題。。。

（3）hasLayout
IE6、7內(nèi)有個(gè)hasLayout的概念，當(dāng)元素的hasLayout屬性值為true的時(shí)候會(huì)達(dá)到和BFC類似的效果，元素負(fù)責(zé)本身及其子元素的尺寸設(shè)置和定位。下面使元素hasLayout為true

position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout為true
（4）通用的清除浮動(dòng)的方案
把清楚浮動(dòng)寫成一個(gè)類，直接引用即可

/*方法1*/
 .clearfix{
     *zoom:1;/*可省略*/
 }
 .clearfix:after{
     content:"";
     display:block;
     clear:left;
 }


 /*方法2*/
 .clearfix{
   *zoom:1;/*可省略*/
 }
 .clearfix:after{
   content:"";
     display:table;
     clear:both;
 }

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
        <style>
        .clearfix{
            *zoom:1;/*可省略*/
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
        </style>
    
    </head>
    <body>
     <div style="border: solid 5px #0e0; width:300px; " class = "clearfix">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>

  </div>

    </body>
</html>

屏幕快照 2017-02-22 下午6.00.11.png

總結(jié)：

清理浮動(dòng)的基本思路
1、使父容器形成BFC
2、利用 clear屬性，清除浮動(dòng)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

關(guān)于浮動(dòng)的一些記錄

關(guān)于浮動(dòng)的一些記錄

1、是什么浮動(dòng)？

2.清理浮動(dòng)

由解決父容器高度塌陷問(wèn)題引出解決浮動(dòng)的幾種方案

總結(jié)：

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

關(guān)于浮動(dòng)的一些記錄

1、是什么浮動(dòng)？

2.清理浮動(dòng)

由解決父容器高度塌陷問(wèn)題引出解決浮動(dòng)的幾種方案

總結(jié)：

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1、是什么浮動(dòng)？