CSS浮動

時間 2019-11-12

標籤 css 浮動欄目 CSS 简体版

原文原文鏈接

CSS浮動

傳統網頁佈局的三種方式css

網頁佈局的本質——用來CSS來擺放盒子。把盒子擺放在相應的位置html

CSS提供了三種傳統的佈局方式：佈局

普通流（標準流）spa
- 所謂的標準流，就是標籤按照規定好默認方式排列
- 塊級元素會獨佔一行，從上向下排列
  - 經常使用元素：div、hr、p、h1~h六、ul、ol、dl、form、table
- 行內元素會按照順序，從左到右順序排列，碰到父元素的邊緣則自動換行
  - 經常使用元素：span、a、i、em等

浮動code

浮動最典型的應用：可讓多個塊級元素一行內排列顯示。orm
網頁佈局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動htm
float屬性用於建立浮動框，將其移動到一邊，直到左邊緣或者有邊緣觸及包含或者另外一個浮動框的邊緣blog

選擇器{float：屬性值;}

屬性值	描述
none	元素不浮動（默認值）
left	元素向左浮動
right	元素向右浮動

浮動特性utf-8
- 浮動元素會脫離標準流
  - 脫離標準普通流的控制移動到指定的位置，俗稱脫標
  - 浮動的盒子不在保留原先的位置
- 浮動的元素會一行內顯示而且元素頂部對齊
  - 若是多個盒子都設置了浮動，則它們會按照屬性值一行內顯示而且頂端對齊排列
  - 【注意】浮動元素是相互貼靠在一塊兒的（不會有縫隙），若是父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊
- 浮動的元素會具備行內塊元素的特性
- 浮動元素和標準流父級搭配使用
  - 爲了約束浮動元素位置，咱們網頁佈局通常採起的策略是：
    - 先用標準流的父元素排列上下位置，以後內部元素採起浮動排列左右位置，符合網頁佈局第一標準

浮動案例it

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         *{
             margin: 0px;
             padding: 0px;
         }

         .box{
             width: 1200px;
             height: 460px;
             background-color: gray;
             margin: 0 auto;
         }
         .left{
             float: left;
             width: 230px;
             height: 460px;
             background-color: aqua;
         }
         .right{
             width: 970px;
             height: 460px;
             background-color: antiquewhite;
             float: left;
         }
         .box1{
             width: 1226px;
             height: 285px;
             background-color: #808080;
             margin: 0 auto;
         }
         .box1 li{
             width: 296px;
             height: 285px;
             background-color: purple;
             float: left;
         }
     </style>
 </head>
 <body>
     <div class="box">
         <div class="left">left</div>
         <div class="right">right</div>
     </div>
     <ol class="box1">
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ol>
 </body>
</html>

清除浮動

清除浮動的本質是清除浮動元素形成的影響
若是父盒子自己有高度，則不須要清除浮動
清除浮動以後，父級就會根據浮動的自盒子自動檢測高度。父級有了高度，就不會影響下面的標準流

選擇器{
clear：屬性值；
}

屬性值	描述
left	不容許左側右浮動元素
right	不容許右側右浮動元素
both	同時清除左右兩側的浮動元素

清除浮動的方法
- 額外標籤法也稱爲隔牆法，是W3C推薦的作法
  - 額外標籤法會在浮動元素的末尾添加一個空標籤。例如：<div style="clear:both"> </div>
  - 【注意】新增的標籤必須是塊元素
- 父級添加overflow屬性
  - 將值設置爲hidden、auto或者scroll
  - 優勢：代碼簡潔
  - 缺點：沒法顯示溢出的部分
- 父級添加：after僞屬性
  - ：after方式是額外標籤的升級版，也是給父級添加
  - ```
  .clearfix:after{
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }
  .clearfix{
  /**IE6\7專有/
  *zoom：1；
  }
```
- 父級添加雙僞屬性
  - ```
  .clearfix:before，
  .clearfix:after{
  content:"";
  display:table;
  
  }
  .clearfix:after{
  clear：both；
  
  }
  .clearfix{
  /**IE6\7專有/
  *zoom：1；
  }
```

總結
- 爲何要清楚浮動
  - 父級沒有高度
  - 子盒子浮動了
  - 影響下面佈局了

清除浮動的方法	優勢	缺點
額外標籤法	通俗易懂，書寫方便	添加去多無心義的標籤
父級overflow：hidden;	書寫簡單	溢出隱藏
父級：after僞元素	結構語義化正確	兼容性問題
父級雙僞元素	結構語義話正確	兼容性問題

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。