css-浮動

時間 2019-11-16

標籤 css 浮動欄目 CSS 简体版

原文原文鏈接

一，浮動的定義

一個浮動盒會向左或向右移動，直到其外邊（outer edge）捱到包含塊邊沿或者另外一個浮動盒的外邊。若是存在行盒，浮動盒的外top（邊）會與當前行盒的top（邊）對齊。若是沒有足夠的水平空間來浮動，它會向下移動，直到空間合適或者不會再出現其它浮動了html

由於浮動（盒）不在普通流內，在浮動盒以前或者以後建立的未定位的（non-positioned）塊盒會豎直排列，就像浮動不存在同樣。然而，接着浮動盒建立的當前及後續行盒會進行必要的縮短，爲了給浮動（盒）的margin box讓出空間。ide

二，浮動的例子

浮動的定義很枯燥，下面咱們經過幾個例子，來理解浮動的概念。
1.浮動盒放不下會換行
demo 連接描述spa

<div class="ct">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
<style>
.ct{
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}

.box{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1{
  background: blue;
}
.box2{
  background: pink;
}
</style>

執行結果
全部盒子都會向左浮動，直到外邊沿挨着塊邊沿。因爲容器寬度不夠，box3放不下，就只能向下移動最左邊
3d

2.被卡住
demo 連接描述code

<div class="ct">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
<style>
.ct{
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}

.box{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1{
  background: blue;
  height: 120px;
}
.box2{
  background: pink;
}
</style>

執行結果
因爲box1的高度比box2的高，box3在向下向左移動的時候，遇到了box1的外邊沿，就中止移動了。
htm

3.浮動和文本
demo連接描述blog

<div class="ct">
  <div class="box box1">1</div>
  <p>捱到包含塊邊沿或者另外一個浮動盒的外邊。若是存在行盒，浮動盒的外top（邊）會與當前行盒的top（邊）對齊
若是沒有足夠的水平空間來浮動，它會向下移動，直到空間合適或者不會再出現其它浮動了</p>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
<style>
.ct{
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}

.box{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1{
  background: blue;
  height: 120px;
  opacity:0.2;
}
.box2{
  background: pink;
}
  p{
    background-color:yellow;
  }
</style>

執行結果
咱們給p段落加上背景色，發現p段落是看不見浮動元素的，但裏面的文字是能夠看見浮動元素的。
當一個普通元素遇到一個浮動元素，普通元素是看不見浮動元素的。但裏面的行盒是能夠看見浮動元素的，行盒會縮短並給浮動元素讓位。ip

寫一下我理解的行盒的概念。行盒就是 line-box，也就是一個塊級元素展現出的每一行就是一個行盒。塊級元素內展現在一行的全部元素共同構成了一個行盒。好比下圖的img和span1構成一個行盒，剩下2個span和button構成另一個行盒。當頁面面積發生改變，每行的內容變化，行盒的內容也會變化。
這裏有一篇寫行盒(line box)垂直方向的文章連接描述ci

4.浮動會脫離普通流
普通流中所遵循的規則是塊級元素佔據一行，行內元素佔據內容的寬度。全部元素從上到下依次排列，普通元素能夠把父元素的內容撐開。
但浮動元素脫離了普通流，元素不是一個個從上到下排列的，浮動元素也不能把父元素撐開，由於父元素壓根就看不見浮動元素。
demo連接描述文檔

5.塊級元素設置浮動以後，寬度會收縮，寬度由內容決定。
行內元素設置浮動以後，能夠設置寬高，內外邊距。
感受有點像inline-block的特性

<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>

執行結果

當咱們取消浮動，結果是div佔據一整行，span不能設置寬高和內外邊距。

6.用浮動設置一個簡單的導航欄

<div class="navbar">
    <ul>
      <li><a href="#">1首頁</a></li>
      <li><a href="#">2產品</a></li>
      <li><a href="#">3服務</a></li>
      <li><a href="#">4關於</a></li>
    </ul>    
  </div>

<style>
    .navbar>ul{
      float: right;
      list-style: none;
    }
    .navbar>ul>li{
      float: left;
      margin-right: 15px;
    }
  
    
</style>

三，浮動的反作用

1.對後續元素位置產生影響
demo：連接描述

<div id="content">
    <div class="menu">側邊欄固定寬度</div>
    <div class="aside">側邊欄固定寬度</div>
    <div class="main">內容區塊自適應寬度</div>    
  </div>
  <div id="footer">我是 footer，但個人樣式出現了問題</div>
  
  <style>
  .aside{
    width: 150px;
    height: 300px;
    background: red;
    float: right;
    opacity:0.2;
  }
  .menu{
    width: 150px;
    height: 300px;
    background: red;
    float: left;
    opacity:0.2;
  }
  .main{
    margin-right: 160px;
    margin-left: 160px;
    background: blue;
    height: 200px;
  }
  #footer{
    background: grey;
  }
  
  </style>

執行結果：
因爲浮動元素脫離普通文檔流，致使浮動元素後面下一個元素footer的排列會出錯。

（2）父容器高度計算出現問題
父元素看不到浮動元素，若是父元素沒有設置高度，浮動元素是沒法撐開父容器的。
demo連接描述
/li裏面的元素所有浮動的狀況下，.navbar的高度爲0，因此設置背景色無效

四：清除浮動

(1)clear屬性
clear能夠用於任何元素，不管是否是浮動元素均可以加。

clear: left;

官方解釋：要求該盒的top border邊位於源文檔中在此以前的元素造成的全部左浮動盒的bottom外邊下方
不正經的理解：若是我前面有左浮動元素，我必須位於它的下方

clear: right;

官方解釋：要求該盒的top border邊位於源文檔中在此以前的元素造成的全部右浮動盒的bottom外邊下方
不正經的理解：若是我前面有右浮動元素，我必須位於它的下方

clear:both;

若是我前面有浮動元素，我必須位於它的下方

（2）封裝一個clearfix的屬性，用於父元素清除浮動
原理：父元素看不見元素，致使高度不正常。那咱們就放一個普通元素在父元素的最後，把高度撐開。因用僞元素能夠省一個標籤，因此就用僞元素

.clearfix::after {
  content:'';  //在父元素的最後生成一個內容爲空的元素。
  display: block; //生成的僞元素是內聯元素，須要設置成塊級元素來佔位置啊
  clear: both;  //把這個元素清除浮動，放在父元素的最下方，把父元素撐開
}

使用：把.clearfix封裝成一個屬性，之後想要在哪裏清除浮動，就給它的父元素加上.clearfix的屬性。
demo連接描述

五：浮動和負margin

兩個浮動元素，若是因放不下致使其中一個下移，對下移的元素設置負 margin 值。
當-margin加自身的寬度小於容器的寬度，可將其上移.
如圖所示，當box2的負margin爲-2px，才能上移。

六：總結

一、浮動元素脫離了普通文檔流，文檔的普通流中的元素表現的就像浮動元素不存在同樣，但文本能夠看見浮動元素二、設置浮動後行內元素擁有一些塊級元素的特性，能夠設置寬高margin 塊級元素有了行內元素的特性，再也不佔據一整行，寬度決定於自身內容三、浮動元素不會將父容器撐開四、浮動元素左右浮動時遇到其餘浮動元素會中止五、若是用了浮動，其父元素最好須要清除浮動

相關標籤/搜索

每日一句

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