CSS浮動&定位

基本概念

浮動模型也是一種可視化格式模型涧卵，浮動的框可以左右移動（根據(jù)float屬性值而定）勤家，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中柳恐，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣伐脖。

普通流（normal flow，也可以翻譯為文檔流）：將頁面自上而下分成一行一行乐设，塊級元素從上至下讼庇、行內(nèi)元素在每行中按從左至右的挨次排放元素,即為文檔流。

浮動模型大致可以分為三種情況：

正常情況

  <div style="border: solid 5px #0e0; width:300px;">
      <div style="height: 100px; width: 100px; background-color: Red;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green; ">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;">
      </div>
  </div>

紅向右浮動

  <div style="border: solid 5px #0e0; width:300px;">
      <div style="height: 100px; width: 100px; background-color: Red; float:right;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green; ">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;">
      </div>
  </div>

紅框左移,覆蓋綠框

  <div style="border: solid 5px #0e0; width:300px;">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;">
      </div>
  </div>

都向左浮動,父元素寬度為0

  <div style="border: solid 5px #0e0; width:300px;">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
  </div>



<div style="overflow:hidden;"> <div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Green; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow; float:left;"> </div> </div> </div>

如果包含塊兒太窄無法容納水平排列的三個浮動元素,那么其它浮動塊兒向下移動,直到有足夠的空間,如果浮動元素的高度不同,那么向下移動的時候可能被卡住

  <div style="border: solid 5px #0e0; width:250px;">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
  </div>


<div style="overflow:hidden;"> <div style="border: solid 5px #0e0; width:250px;"> <div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Green; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow; float:left;"> </div> </div> </div>

卡住了

  <div style="border: solid 5px #0e0; width:250px;">
      <div style="height: 120px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
  </div>



<div style="overflow:hidden;"> <div style="border: solid 5px #0e0; width:250px;"> <div style="height: 120px; width: 100px; background-color: Red; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Green; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow; float:left;"> </div> </div> </div>

行框

浮動會讓元素脫離普通流, 如果浮動的元素后面有一個文檔流中元素,那么這個元素的框會表現(xiàn)的像浮動元素不存在,但是框的文本內(nèi)容會受到浮動元素的影響,會移動以留出空間.用術(shù)語說就是浮動元素旁邊的行框被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框

不浮動

  <div style="border: solid 5px #0e0; width: 250px;">
      <div style="height: 50px; width: 50px; background-color: Red;"></div>
      <div style="height: 100px; width: 100px; background-color: Green;">
         11111111111
         11111111111
      </div>
  </div>

浮動

  <div style="border: solid 5px #0e0; width: 250px;">
      <div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
      <div style="height: 100px; width: 100px; background-color: Green;">
         abc def ghi
         abc def ghi
         abc def ghi
      </div>
  </div>

可以看出浮動后雖然綠色div布局不受浮動影響近尚，正常布局蠕啄，但是文字部分卻被擠到了紅色浮動div外邊。要想阻止行框圍繞在浮動元素外邊，可以使用clear屬性歼跟，屬性的left和媳，right，both哈街，none表示框的哪些邊不挨著浮動框

  <div style="border: solid 5px #0e0; width: 250px;">
      <div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
      <div style="height: 100px; width: 100px; background-color: Green; clear:both;">
         11111111111
         11111111111
      </div>
  </div>

清理浮動

解決浮動父容器高度塌陷問題

都向左浮動,父元素寬度為0

  <div style="border: solid 5px #0e0; width:300px;">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
  </div>

如果我們想讓父元素在視覺上包圍浮動元素可以像下面這樣處理,在最后添加一個空div留瞳，對它清理。缺點是增加了一個無意義的標(biāo)簽

  <div style="border: solid 5px #0e0; width:300px;">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
      <div style="clear:both;"></div>
  </div>

BFC清理浮動

BFC的全稱是 Block Format Content
即塊級格式化作用域骚秦。

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

BFC 特性

BFC會阻止垂直外邊距（margin-top她倘、margin-bottom）折疊
- 按照BFC的定義，只有同屬于一個BFC時作箍，兩個元素才有可能發(fā)生垂直Margin的重疊硬梁，這個包括相鄰元素，嵌套元素胞得，只要他們之間沒有阻擋(例如邊框荧止，非空內(nèi)容，padding等)就會發(fā)生margin重疊阶剑。
- 因此要解決margin重疊問題罩息，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說个扰，意義不大，沒有必要給它們加個外殼葱色，但是對于嵌套元素來說就很有必要了递宅，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊
BFC不會重疊浮動元素
BFC可以包含浮動

我們可以利用BFC的第三條特性來“清浮動”苍狰，這里其實說清浮動已經(jīng)不再合適办龄，應(yīng)該說包含浮動。也就是說只要父容器形成BFC就可以淋昭，簡單看看如何形成BFC

float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed

我們可以對父容器添加這些屬性來形成BFC達(dá)到“清浮動”效果

<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
    <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
    </div>
</div>

局限性

使用BFC使用float的時候會使父容器長度縮短俐填，而且還有個重要缺陷——父容器float解決了其塌陷問題，那么父容器的父容器怎么辦翔忽？overflow屬性會影響滾動條和絕對定位的元素英融；position會改變元素的定位方式，這是我們不希望的歇式，display這幾種方式依然沒有解決低版本IE問題驶悟。。材失。

hasLayout

IE6痕鳍、7內(nèi)有個hasLayout的概念，當(dāng)元素的hasLayout屬性值為true的時候會達(dá)到和BFC類似的效果，元素負(fù)責(zé)本身及其子元素的尺寸設(shè)置和定位笼呆。下面使元素hasLayout為true

position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout為true

通用的清理浮動法案

  /*方法1*/
  .clearfix{
      *zoom:1;
  }
  .clearfix:after{
      content:"";
      display:block;
      clear:left;
  }

  /*方法2*/
  .clearfix{
    *zoom:1;
  }
  .clearfix:after{
    content:"";
      display:table;
      clear:both;
  }

兩種方案

雖然我們得出了一種瀏覽器兼容的靠譜解決方案熊响，但這并不代表我們一定得用這種方式，很多時候我們的父容器本身需要position：absolute等形成了BFC的時候我們可以直接利用這些屬性了诗赌，大家要掌握原理汗茄，活學(xué)活用【成觯總而言之清理浮動兩種方式

利用 clear屬性剔难，清除浮動
使父容器形成BFC

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市奥喻，隨后出現(xiàn)的幾起案子偶宫，更是在濱河造成了極大的恐慌，老刑警劉巖环鲤，帶你破解...
沈念sama閱讀 221,820評論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件纯趋，死亡現(xiàn)場離奇詭異，居然都是意外死亡冷离，警方通過查閱死者的電腦和手機吵冒，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,648評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來西剥，“玉大人痹栖，你說我怎么就攤上這事〔t空！?“怎么了揪阿？”我有些...
開封第一講書人閱讀 168,324評論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長咆畏。經(jīng)常有香客問我南捂，道長，這世上最難降的妖魔是什么旧找？我笑而不...
開封第一講書人閱讀 59,714評論 1贊 297
?港島之戀（遺憾婚禮）
正文為了忘掉前任溺健，我火速辦了婚禮，結(jié)果婚禮上钮蛛，老公的妹妹穿的比我還像新娘鞭缭。我一直安慰自己，他們只是感情好魏颓，可當(dāng)我...
茶點故事閱讀 68,724評論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布缚去。她就那樣靜靜地躺著，像睡著了一般琼开。火紅的嫁衣襯著肌膚如雪易结。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 52,328評論 1贊 310
城市分裂傳說
那天，我揣著相機與錄音搞动，去河邊找鬼躏精。笑死，一個胖子當(dāng)著我的面吹牛鹦肿，可吹牛的內(nèi)容都是我干的矗烛。我是一名探鬼主播，決...
沈念sama閱讀 40,897評論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼箩溃，長吁一口氣：“原來是場噩夢啊……” “哼瞭吃！你這毒婦竟也來了涣旨？” 一聲冷哼從身側(cè)響起和蚪，我...
開封第一講書人閱讀 39,804評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后催束，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,345評論 1贊 318
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡凯沪，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,431評論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了湘纵。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,561評論 1贊 352
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖产弹，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情斤斧，我是刑警寧澤折欠，帶...
沈念sama閱讀 36,238評論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布酱床，位于F島的核電站扇谣，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏鸯绿。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,928評論 3贊 334
男人毒藥：我在死后第九天來索命
文/蒙蒙一劲绪、第九天我趴在偏房一處隱蔽的房頂上張望蝎宇。院中可真熱鬧兔乞，春花似錦、人聲如沸淡溯。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,417評論 0贊 24
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽雕薪。三九已至，卻和暖如春晓淀，著一層夾襖步出監(jiān)牢的瞬間所袁，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,528評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留锄俄，地道東北人奶赠。一個月前我還...
沈念sama閱讀 48,983評論 3贊 376
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親鄙信。傳聞我的和親對象是個殘疾皇子瞪醋，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,573評論 2贊 359