技術干貨：CSS的浮動和定位，我是這么來理解的！

準流的默認特性
1、分行、塊級元素，并且能夠dispay轉換。
2、塊級元素（block）：默認獨占一行，不能并列顯示，能夠設置寬、高，寬度為父盒子的100%。例如：div、p、標題元素（h1-h6）、列表元素（ul li、dl dt dd）
3、行內元素（inline）：默認并排顯示，不能設置寬、高，寬度為內容的寬度。例如：span、a、b、i
4、margin-bottom 和margin-top 塌陷，以最大值為準。
脫標的元素的特性
只要是脫離了標準流，元素都是不區分行、塊的，體現在任何元素都可以設置寬、高了。都有了收縮的性質，就是不設置寬度，就自動縮減為里面內容的寬度。
浮動的元素有貼邊的性質，絕對定位的元素可以自由定位。

1.盒子的浮動（float 屬性）：

在標準流中，一個塊級元素在水平方向會自動伸展，直到包含它的元素的邊界；在豎直方向和兄弟元素一次排列。不能并排。

CSS的float屬性默認為none，將float屬性設置為left或者right后，元素會向其父元素的左側或右側緊靠，同時默認情況下，盒子的寬度不再伸展，而是根據盒子里面的內容的寬度來確定。脫離了標準文件流。（但是，本顯示會占據一定的空間）。

這樣未填滿的部分就會進行填充。為了消除影響，不讓后面的元素因為浮動產生的這些空間進行填充，使用clear屬性進行消除浮動對后面的元素造成的影響：

clear 屬性：

clear屬性除了可以設置right、left 也可以設置為both，表示同時消除左右兩邊的影響。

clear屬性設置要放到 float 之后的要消除float影響的兄弟div里面，而不是float本身所在的div。

設置上clear之后，該div會把前面設置float的div 當做塊級div來看待。

使用示例：

因為浮動的元素都不在標準流里，如果盒子內部元素都是浮動元素，父級div 縮成一條。

解決方法，在后面加一個空div 并清除浮動影響.

高度消失后，父級將只保留margin和border的高度，與父級平行的div 將會緊挨著父級顯示，顯示漂浮的內容會占據空間，后面div內容會依次緊挨著漂浮的內容顯示。

脫離了標準流，但內容顯示上會被其他元素包圍。（其他元素可以“趁空而入”）

浮動可以使塊級元素并排顯示，用于頁面布局。

2.盒子的定位（position）：

static （標準流中默認）

盒子按照標準流（包括浮動方式）進行布局。

relative （位于標準流中）：

以標準流的排版方式為基礎，然后使盒子相對于它在原本的的標準位置偏移指定的距離。相對定位的盒子，仍在標準流中，它后面的盒子仍以標準流方式對待它。

只要標識該div position:relative ;使用 top left 等屬性可以設置偏移量，與父級元素的定位方式無關。

總結：

1.使用相對定位的盒子仍在標準流中，它對付款和兄弟盒子沒有任何影響。

2.使用相對定位的菏澤仍在標準流中，它對父塊和兄弟盒子沒有任何影響。

對浮動的盒子使用相對于定位也是一樣的

absolute （非標準流）

絕對定位，盒子位置以它的包含框為基準進行偏移，絕對定位的盒子從標準流中脫離，其他盒子就當這個盒子不存在一樣。

設置position后：div 脫離標準流，寬度自動按內容寬度，覆蓋在后面的元素之上。

設置top，left等屬性：

top:5px;

跑出了父級的div ，

把father div塊設置成相對定位：

1.使用絕對定位的盒子以它的”最近“的一個”已經定位“的祖先元素為基準進行偏移，如果沒有定位定位的祖先元素，那會以瀏覽器窗口進行定位。

已經定位：position 屬性被設置，且被設置的不是 static的任意一種方式。

最近，離該節點最近的一個已經定位的節點。

2.絕對定位的框從標準流中脫離，這意味著對其后兄弟盒子的定位沒有影響，其他盒子就好像這個盒子不存在一樣。

通過實驗可知道：

如果設置了絕對定位，而沒有設置偏移屬性，那么它仍將保持原來的位置，這個性質可以用于需要使某個元素脫離標準流，而仍然希望保持原來的位置的情況。

fixed （以窗口為基準）

固定定位，基準不是祖先元素而是瀏覽器窗口或者其他縣市設備的窗口。

z-index:

當塊被設置了position屬性時，該值便可設置各塊之間的重疊高低關系，默認z-index值為0

盒子的display屬性：

none :此元素不會被顯示。

block：顯示為塊級元素，前后會帶有換行符。

inline：默認此元素被顯示為內聯元素，元素前后沒有換行符。

list-item：作為列表顯示

圖書推薦：大家可以參考《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的浮動。

在線咨詢

上一篇：html屏蔽瀏覽器右鍵、禁止復制的實現
下一篇：HTML常考知識點

您的項目需求

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

整合營銷服務商

技術干貨：CSS的浮動和定位，我是這么來理解的！

動

清除浮動

您的項目需求