CSS浮動_ZenDei技術網路在線

CSS浮動

-Advertisement-

CSS浮動 1. 傳統網頁佈局的三種方式網頁佈局的本質——用來CSS來擺放盒子。把盒子擺放在相應的位置 CSS提供了三種傳統的佈局方式：普通流（標準流）所謂的標準流，就是標簽按照規定好預設方式排列塊級元素會獨占一行，從上向下排列常用元素：div、hr、p、h1~h6、ul、ol、dl、fo ...

CSS浮動

傳統網頁佈局的三種方式
- 網頁佈局的本質——用來CSS來擺放盒子。把盒子擺放在相應的位置
- CSS提供了三種傳統的佈局方式：
  - 普通流（標準流）
    - 所謂的標準流，就是標簽按照規定好預設方式排列
    - 塊級元素會獨占一行，從上向下排列
      - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
    - 行內元素會按照順序，從左到右順序排列，碰到父元素的邊緣則自動換行
      - 常用元素：span、a、i、em等
  - 浮動
    - 浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。
    - 網頁佈局第一准則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動
    - float屬性用於創建浮動框，將其移動到一邊，直到左邊緣或者有邊緣觸及包含或者另一個浮動框的邊緣
    - ```
    選擇器{float：屬性值;}
```
  - 屬性值描述
    
    none 元素不浮動（預設值）
    
    left 元素向左浮動
    
    right 元素向右浮動
- 浮動特性
  - 浮動元素會脫離標準流
    
    脫離標準普通流的控制移動到指定的位置，俗稱脫標
    
    浮動的盒子不在保留原先的位置
  - 浮動的元素會一行內顯示並且元素頂部對齊
    
    如果多個盒子都設置了浮動，則它們會按照屬性值一行內顯示並且頂端對齊排列
    
    【註意】浮動元素是相互貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊
  - 浮動的元素會具有行內塊元素的特性
  - 浮動元素和標準流父級搭配使用
    
    為了約束浮動元素位置，我們網頁佈局一般採取的策略是：
    
    先用標準流的父元素排列上下位置，之後內部元素採取浮動排列左右位置，符合網頁佈局第一標準

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

浮動案例

<!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；
  }
```

總結
- 為什麼要清楚浮動
  - 父級沒有高度
  - 子盒子浮動了
  - 影響下麵佈局了

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

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

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Windows安裝與配置—MongoDB

1，下載安裝打開下載鏈接：http://dl.mongodb.org/dl/win32/x86_64，選擇尾碼是2008plus-ssl-3.6.15.zip的版本，32位和64位通用。 2，安裝配置第一步：解壓到一個盤上，例如我的解壓的目錄D:\MongoDB\mongodb-win32-x8 ...
Mysql中 instr與concat

#INSTR(字元串, 子串)，#返回值：第一個子串的索引-1#類似indexOf()#例如：SELECT INSTR('人民萬歲，世界萬歲','萬')SELECT INSTR('人民萬歲，世界萬歲','中華') #INSTR(欄位名, 字元串)#例如SELECT *,INSTR(DEPART,'系 ...
[20191112]oracle共用連接模式埠.txt

[20191112]oracle共用連接模式埠.txt--//如果使用共用服務模式,你可以發現每次重啟資料庫對應的埠號會發生變化.# netstat -tunlp | egrep "Active|Proto|ora_[ds]"Active Internet connections (only s ...
表單生成器(Form Builder)之mongodb表單數據查詢——統計查詢求和

上一篇筆記僅是記錄了一下簡單的關聯查詢，根據筆記中的場景：將某一車輛關聯的耗損記錄全部放在了一個欄位當中。不知道現在中有沒有這種場景，我們的應用中沒有類似的場景，可能我們更關註的是某車輛的總耗損金額和總營收金額、總里程數等，因此這篇筆記記錄一下怎麼得到這些數據。要想獲取這些記錄我們首先想到的就是先按 ...
Elastic search集群新增節點（同一集群，同一物理機）

elastic search 集群新增node 同一臺物理機 ...
Android 基於ksoap2的webservice請求的學習

【學習階段】 WebService網路請求？其實我也是第一次遇到，之所以有這個需要是因為一些與 ERP 相關的業務，需要用到這樣的一個請求方式。開始學習WebService ①當然是百度搜索，這裡找了一個學習的博客 https://blog.csdn.net/swjtugiser/article ...
monkey命令解析詳解

我面試時遇到過幾次讓背個monkey命令的，可以這樣簡單說一個：adb shell monkey -p(約束包名) -s 200 -v -v --throttle 300 1500000 >e:\001.txt （日誌保存路徑）一、monkey簡介： Monkey 就是SDK中附帶的一個工具。Mo ...
CSS基本選擇器是什麼？基本選擇器是如何工作

基本選擇器介紹基本選擇器又分為六種使用方式：如、通用選擇器、標簽選擇器、類選擇器、Id選擇器、結合元素選擇器、多類選擇器。基本選擇器使用說明表。選擇器 | 語法格式 | 含義 |舉例 | | | 通用選擇器 | {屬性：值;} |通用選擇器可以選擇頁面上的所有元素，並對它們應用樣式，用來表示 ...