css4種布局技巧-float

標籤：color   padding   tom   多個   border   add   owb   不能   bbb   

我所知的常用的布局技巧有四種，原來的三種（1.float布局  2.position布局 3.table布局）以及現在css3新增的flex布局。這四種布局各有優劣

block與inline屬性比較

• display:block

1. block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。
2. block元素可以設定width,height屬性。區塊層級元素即使設定了寬度,仍然是獨佔一行。
3. block元素可以設定margin和padding屬性。

• display:inline

2. inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
3. inline元素設定width,height屬性無效。
4. inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

• display:inline-block

1. 簡單來說就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。之後的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性

float屬性

1.會以某種方式將浮動元素從文檔的正常流中刪除，其他元素會環繞該元素

2.float屬性的元素會自動產生塊級框，按照區塊層級元素來處理，display：block也可以使用，不過沒有具體意義

3.浮動元素的規則：

• 浮動元素的外邊距不會合并（與table不相同，在下文會解釋）
• 浮動元素不能超過其包含塊的左右邊界
• 浮動元素的的左右邊界必須是文檔之前出現的浮動元素邊界，除非是在正上方或者正下方
• 後出現的浮動元素必須比先出現的浮動元素低
• 浮動超出包含塊，會另起一行

對上面規則的解釋

 

放上一段這樣的html代碼

1 <div style="border: solid 5px #333; width:300px;">2   3         <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;  ">4         </div>5         <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;">         6         </div>7         <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;">8         </div>9     </div>

將redBox改為float:left之後

greenBox消失了，說明浮動元素首先是從父元素中扣出來，形成新的一層，然後開始浮動。對於原有的元素會覆蓋

然而，在greenBox加入文字之後呢，

看起來像是在yellowBox裡加了文字一樣，這是因為文本元素會環繞浮動元素排列，也就是“流動”，而greenBox高度只有100px，所以擠到了他的下邊界之外

但是如果greenBox的高度不設定呢，將greenBox的height屬性去掉，

高度隨著文字資料流改變，就會出現和行高等高的greenBox

如果redBox之後的父元素中有很多文本，就會出現這種情況，

  

這就解釋了1.會以某種方式將浮動元素從文檔的正常流中刪除，其他元素會環繞該元素

 

而對於5條浮動規則：

可以這樣理解，css每次處理到浮動元素時是不管這個浮動元素上面的元素的，對於這樣一段代碼

<div style="border: solid 5px #333; width:300px;">  <p>xxxxxxxxxxxxxxx</p>        <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left  ">        </div>        <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;">                </div>        <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;">        </div>

    </div>

會出現這樣的現象

也就述說浮動是以當前浮動元素的原上邊界作為浮動的上邊界的。

而且浮動塊會儘可能的向一個方向浮動，但是不能覆蓋其他浮動元素，超出邊界 則另起一行

看下面一段代碼：

<div style="border: solid 5px #333; width:300px;">        <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left  ">        </div>          <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;float:left">                </div>          <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;">        </div>    </div>

如果含有多個浮動塊

<div style="border: solid 5px #333; width:300px;">        <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left  ">        </div>          <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;float:left">                </div>   <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left  ">        </div>  <div id="greenBox" style="height: 100px; width: 100px; background-color: Green;float:left">                </div>        <div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;">        </div>    </div>

這時又會發現，浮動塊跑到了父元素的外面，這是因為浮動塊是相當於從父元素摳出來的，所以不佔位置，所以會超出下邊界。

關於父元素塌陷的相關內容，具體可以看這篇部落格：http://blog.csdn.net/GoodShot/article/details/44348525

clear屬性

clear：left | right | both | none | inherit

clear:left  clear:right 分別是清除左右浮動，clear:both是清除所有，看下面的例子

<div style="border: solid 5px #333; width:300px;">        <div  id="redBox" style="height: 100px; width: 100px; background-color: Red;float:left  ">        </div>          <div id="greenBox" style="height: 120px; width: 100px; background-color: Green;float:right">                </div>          <div id="yellowBox" style="height: 100px; width: 300px; background-color: Yellow;">        </div>    </div>

 

                       

然後給yellowBox分別設定clear:left，clear：right，clear：both；

 

                              

以上是我關於浮動的理解

css4種布局技巧-float