float屬性

float屬性介紹

float給人一種捉摸不透的感受，不過能夠依照瀏覽器的解析機制(根據HTML文檔，從上往下解析)，對float屬性瞭解一二。float有四種值：none/left/right/inherit，咱們主要關注的是left/right。

float的出現，最初是爲了實現圖文環繞的效果，後來漸漸的也被用於其餘方面，實現一些特殊的排版。

float的特性

一、float元素存在佔位，並未徹底脫離文檔流；float元素雖然脫離了父元素，不過會影響行內元素(inline/inline-block)。如：

<div style="background:#00f;color: #fff;">
    父元素中的行內元素
    <div style="float: left;width: 100px;height: 50px;background: #f00;">float元素</div>
</div>
<span style="display:inline-block;background: #0f0;">我是行內元素</span>

效果：

 

二、absolute元素是能夠經過top/bottom/left/right調整本身的位置，而float元素受其餘元素的影響，經過其餘元素肯定自身的位置，如：

<div style="background: #f00;">我是塊級元素,float元素在下面</div>
<div style="background: #00f;width: 100px;height: 50px;float: left;">float</div>

效果：

三、float元素之間在佔位上是相互影響的，而absolute元素即便處於同一層，在佔位上是互不影響的。如：

<!-- absolute1被absolute2覆蓋了 -->
<div style="background: #f00;width: 100px;height: 50px;position: absolute;">absolute1</div>
<div style="background: #00f;width: 100px;height: 50px;position: absolute;">absolute2</div>
<div style="background: #f00;width: 100px;height: 50px;float: right;">float1</div>
<div style="background: #00f;width: 100px;height: 50px;float: right;">float2</div>

效果：

注：若是父元素想包含float的子元素，能夠觸發父元素的BFC