CSS基礎-浮動

動

浮動是為了元素標簽的并排顯示問題。

我們在瀏覽網頁的時候，經常會看到幾個 div 塊是可以并排顯示的，浮動就是解決這樣問題的方法之一。

float屬性有以下的值

float: left; 左浮動

float: right 右浮動

浮動的特點

浮動主要針對的是并排顯示的盒子而言。
在一個父容器的盒子里，兄弟元素之間要浮動必須都浮動。
父容器必須要有一個足夠的寬度，否則不足以使得各個子元素之間并排展示。
一個父容器的盒子內，兄弟元素會按照順序貼靠，如果是左浮動，就往左貼合；如果是右浮動，就往右貼合。如果發現貼合的盒子后沒有足夠的空間，則會在尋找前一個兄弟元素進行貼靠。直到空間合適為止。
浮動的元素已經脫離了標準的HTML文檔流，不再區分塊級元素、行內元素并且一律能設置寬度和高度，即使它是span標簽或者a標簽

一個浮動的例子

<!--一個浮動的例子-->
<style>


    .box1 {
        width: 600px;
        height: 200px;
        border: 1px solid #000;
    }


    .box1 .con1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
    }


    .box1 .con2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }


    .box1 .con3 {
        width: 201px;
        height: 200px;
        background-color: yellowgreen;
        float: left;
    }
</style>
<div class="box1">
        <div class="con1"></div>
        <div class="con2"></div>
        <div class="con3"></div>
</div>

一個順序貼靠的例子

<!--  一個順序貼靠的例 子-->
<!-- 以下代碼中 兄弟元素 con1， con2， con3 之間會進行順序貼靠-->
<!-- con3 在貼靠 con2 的時候，發現父容器的寬度只能是400px, 分別被con1 和 con2 占據， 所以con3 會找 cont1 貼靠，最終con3 位于 con1右邊， con2下邊 -->


<style>


  .box1 {
      width: 400px;
      height: 200px;
      border: 1px solid #000;
  }


  .box1 .con1 {
      width: 200px;
      height: 200px;
      background-color: orange;
      float: left;
  }


  .box1 .con2 {
      width: 200px;
      height: 100px;
      background-color: blue;
      float: left;
  }


  .box1 .con3 {
      width: 200px;
      height: 100px;
      background-color: yellowgreen;
      float: left;
  }
</style>
<div class="box1">
  <div class="con1"></div>
  <div class="con2"></div>
  <div class="con3"></div>
</div>

清除浮動

清除浮動是為了不影響設置浮動標簽的后續的標簽的布局展示。

因為，在一個父容器中，子元素浮動了，脫離了標準文檔流，不在占用之前的位置，會導致無法撐開沒有設置高度的父元素；從而導致后續的結構擠壓，造成整個頁面布局的混亂。

給父元素加個高度。在那些明確知道父容器高度的情況下，可以使用。

<style>
  * {
    margin: 0;
    padding: 0;
  }


  div {
    height: 100px;
  }
  p {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: red;
  }
</style>


<body>
  <div>
    <p></p>
    <p></p>
  </div>


  <div>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>

后續元素增加 clear:both ,清除前面元素對自己的影響。

<style>
    * {
        margin: 0;
        padding: 0;
    }


    .box2 {
        margin-top: 20px;
        clear: both;
    }
    p {
        float: left;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        background-color: red;
    }
</style>


<body>
<div>
    <p></p>
    <p></p>
</div>


<div class="box2">
    <p></p>
    <p></p>
    <p></p>
</div>
</body>

浮動的父容器添加后續偽元素，clear:both ，清除浮動對后續元素的影響(推薦方式)。

<style>
  * {
      margin: 0;
      padding: 0;
  }


  .cleafix::after {
      content: '';
      clear: both;
      display: block
  }


  p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 20px;
      background-color: red;
  }
</style>


<body>


<div class="cleafix">
  <p></p>
  <p></p>
</div>


<div class="cleafix">
  <p></p>
  <p></p>
  <p></p>
</div>
</body>

額外的空標簽，在浮動元素的父盒子之后添加一個空標簽，空標簽上添加 clear:both 屬性。

<style>
* {
  margin: 0;
  padding: 0;
}


.clearboth {
  clear: both;
}


p {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: red;
}
</style>


<body>
<div>
<p></p>
<p></p>
</div>


<div class="clearboth"></div>


<div>
<p></p>
<p></p>
<p></p>
</div>
</body>

浮動元素的父容器添加 overflow:hidden , 使得子元素的浮動只能作用在父容器內。

頁面布局中，有兩個非常常用的CSS屬性。它們巧妙的控制著塊級元素們之間的位置，靈活的讓塊級元素在一行內顯示或者另起一行。說到這里，相信大家已經猜出來了，這兩個屬性就是控制塊級元素浮動的屬性。整個頁面布局過程中，浮動屬性的使用頻率是最高的。今天，小海老師就來帶領大家一同認識這兩個神奇的CSS屬性。

承接文章：發揮個人的優勢，踏踏實實的學習前端開發，小海為你傳授學習心得

技術等級：初級 | 適合前端開發的初學者閱讀學習。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

一、浮動屬性：

CSS技術使用float屬性來實現塊級元素的浮動效果。

CSS技術使用float屬性實現浮動效果

該屬性可以有下列取值：

left，控制塊級元素左浮動。
right，控制塊級元素右浮動。

屬性說明：我們都知道，塊級元素之間默認情況下是獨占一行的。也就是說，兩個在代碼中緊密相連的塊級元素，它們的擺放位置是一個在上一行，另一個在下一行。盡管通過width和height屬性為塊級元素設置了大小，使得塊級元素無法占滿整個行，但是塊級元素右側空余的位置仍然不允許出現任何內容。

讓我們一同來看下列實例：

HTML代碼如下所示：

<div id=”box01”></box>
<div id=”box02”></box>

CSS代碼如下所示：

#box01,#box02{
width:200px; height:100px;
}
#box01{background-color:#ff5857;}
#box02{background-color:#5857ff;}

上述代碼的運行結果如下圖所示，這張圖為我們展示了兩個塊級元素默認的位置擺放。

展示兩個塊級元素的默認位置

如果我想讓兩個塊級元素在一行內顯示該如何實現呢？這就需要float屬性登場了。

將#box01的CSS代碼中添加如下屬性：float:left，會發生什么情況呢？同學們實踐操作一下，我們會發現，屏幕中就只剩下紅色的塊級元素了。那藍色的#box02去哪里了呢？其實#box02響應了#box01浮動的號召，和#box01一同出現在同一行了，只是被壓在了紅色的#box01的下面。

解決方法就是讓藍色的#box02也添加上 float:left的屬性。這樣，兩個塊級元素就可以共同出現在一行了。下圖為我們展示了這樣的效果。

展示兩個塊級元素的左浮動位置

下面讓我們再看一個實例，這個實例中我們為兩個塊級元素添加一個容器。

HTML代碼如下所示：

<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>

我們設置容器#box的寬度為400px。內部的兩個塊級元素：.boxLeft的寬度設置為150px；.boxRight的寬度設置為100px。要求讓這兩個內部的塊級元素在一行內顯示，并且分布到容器的兩端。

CSS代碼如下所示：

#box{
width:400px; height:100px;
background-color:#cccccc;
}
#box .boxLeft{
width:150px; height:100px;
background-color:#ff5857;
float:left;
}
#box .boxRight{
width:100px; height:100px;
background-color:# 5857 ff;
float:right;
}

我們可以看到，在.boxRight對象上，我們添加了float:right的CSS屬性，讓這個塊級元素發生了右浮動，則該元素跑到了容器的最右側。下圖為我們展示了這樣的效果。

展示兩個塊級元素的左右浮動位置

浮動屬性的使用結論：

若希望多個塊級元素在一行內顯示，則這幾個塊級元素都要具備float浮動屬性。

二、清除浮動屬性：

CSS技術使用clear屬性來實現塊級元素的清除浮動效果。

CSS技術使用clear屬性設置清除浮動效果

該屬性可以有下列取值：

left，清除塊級元素的左浮動效果。
right，清除塊級元素的右浮動效果。
both，清除塊級元素的兩端浮動效果。

屬性說明：根據上面的float屬性的使用，我們可想而知，一個緊跟在具有浮動屬性的塊級元素后面的塊級元素，即使它不想和它前面的塊級元素在一行內顯示，也會受到前面塊級元素浮動屬性的影響，被壓在前面塊級元素的下方。

解決這個問題，可以對不希望和前面塊級元素在同一行顯示的塊級元素使用清除浮動屬性。

下面讓我們來看這個實例：

HTML代碼如下所示：

<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>

CSS代碼如下所示（#box .boxRIght）：

#box .boxRight{
width:100px; height:100px;
background-color:# 5857ff;
clear:left;
}

因為.boxRight具備clear:left屬性，所以即使.boxLeft使用了float:left屬性，它們也仍舊分布在兩行，不會在同一行顯示。就好像沒有過使用任何浮動效果似的。

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

文章預告

結合前面所學的CSS知識，使用今天的浮動屬性，可以做一個簡單的導航欄。那么下一篇文章中，小海老師會帶領大家一同利用最近的所學，做一個水平放置的導航欄。效果非常酷炫，希望正在學習前端開發的同學們千萬不要錯過。

在線咨詢

上一篇：丟掉JS，CSS也可以獨立完成許多牛掰的功能
下一篇：青島HTML5入門應怎么判斷？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS基礎-浮動

動

清除浮動

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

小海教材

小海聲明

文章預告

您的項目需求