float-浮動

特點

  1. 浮動會從文檔的正常流中刪除,但是仍然會影響布局,基于此,一個元素浮動時,其他內容會環繞該元素
  2. 浮動元素的外邊距不會合并,如果其他元素與此浮動元素相鄰,而且這些元素也有外邊距,那么這些外邊距不會與浮動元素的外邊距合并
  3. 浮動元素會建立包含塊,生成塊級框這點很重要
  4. 浮動元素,其包含塊定義為最近的塊級祖先元素

浮動元素的規則

浮動元素的規則有很多,暫時只列出以下三點,具體可以查看《CSS權威指南的》P292~P297了解

  1. 浮動元素的外邊界不會超出其父元素的外邊界
  2. 浮動元素彼此不會“覆蓋”,也就是說一個元素向左浮動,而另一個元素已經在那個位置,后放置的元素將挨著前一個浮動元素的右外邊界放置
  3. 浮動元素的頂端不能比之前所有浮動元素或會計元素的頂端更高。
    如下所示,float2并沒有跑到最上面去,而是與float1并排顯示
<style>
    .wrap{
      width: 300px;
      height: 300px;
      margin: 50px auto;
      background: pink;
    }
    
    .content{
      background: grey;
      width: 100px;
      float: left;
    }
    .float1{
      background: blue;
      width: 250px;
      float: left;
    }
    .float2{
      background: yellow;
      width: 49px;
      float: left;
    }
  </style>

<div class="wrap">
  <div class="content">我要float顯示</div>
  <div class="float1">浮動1</div>
  <div class="float2">浮動2</div>
</div>

顯示如下:

Paste_Image.png

實例說明

例子1:
關于浮動元素會生成塊級框的例子
考慮如下代碼:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .wrap{
      //width: 300px;
      //height: 300px;
      background: pink;
      float: left;
      position: relative;
      left: 50%;
    }
    .cont{
      position: relative;
      top: 10px;
      left: -50%;
       //width: 100px;
      //height: 100px;
      background: blue;
    }
    
  </style>
</head>
<body>
<div class="wrap">
  <div class="cont">
    我的
  </div>
</div>
</body>
</html>

顯示效果如下:

Paste_Image.png

作用是將div.cont居中,假如去除div.wrap的float屬性,那么div.wrap的寬度為瀏覽器的寬度,最終無法使div.cont居中,float生成塊級框就是:float后的元素的寬高 = 它的子元素的寬高,上面居中代碼的流程如下

  1. div.wrap根據position:relative; left: 50%;相對于父元素(它的父元素現在就是html,也就是瀏覽器的寬度,因此div.wrap的左邊界線與屏幕的中心線對齊)
  2. div.wrap浮動使得div.wrap的寬度=div.cont的寬度
  3. div.cont使用position:relative; left: -50%; 這是相對于父元素寬度左移50%,因為父元素的寬度就等于它自身的寬度,因此就是相對于它本身左移50%,也就居中了

清除浮動的方法

方法一:
對受影響的元素使用: clear: both;
注意:一般這只是用于緊鄰后面的元素的清除浮動
方法二:
對受影響的元素同時設置width:100%(或固定寬度) + overflow: hidden

注意:當子元素設置了float后,父元素包含塊受到影響,當父元素縮成一條時,用clear:both清除浮動無效,

:before {
  content: '';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容