鍍金池/ 問答/HTML/ 自適應(yīng)布局的float問題

自適應(yīng)布局的float問題

在閱讀大神的教程時(shí)，對“自身浮動法”中：側(cè)欄要放在主欄的前面產(chǎn)生了疑問。

在我的理解中，float是脫離普通流（文檔流）的，那么為什么他的順序是固定的呢？就像absolute，應(yīng)該和普通流沒有關(guān)系才對。。。

修改代碼（浮動的側(cè)欄排列在main之下）

CSS代碼：

html,body{margin:0;height:100%;}
#main{height:100%;margin:0 210px;background:#FFE6B8;}
#left,#right{width:200px;height:100%;background:#A0B3D6;}
#left{float:left;}
#right{float:right;}

HTML代碼：

<div id="main"></div>    
        <div id="left"></div>
        <div id="right"></div>

教程鏈接

回答
編輯回答
青黛色

兄弟，2009年的文章了，求你們了，看看新技術(shù)吧

2017年12月10日 18:12
編輯回答
離殤

文檔流由上至下，由左至右依次解析。
你改變順序布局就改變了解析順序。

注意：使用float脫離文檔流時(shí)，其他盒子會無視這個(gè)元素，但其他盒子內(nèi)的文本依然會為這個(gè)元素讓出位置，環(huán)繞在周圍。而對于使用absolute positioning脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它 。

HTML普通流/文檔流

2017年2月6日 13:22
編輯回答
冷眸

昨晚查閱資料也有了自己的理解：
按照普通流的默認(rèn)的流動布局解析方式，先設(shè)置main的width，這一行就沒有空間；
然后設(shè)置“float”元素，這里我沒有考慮到普通流的渲染順序：width在前，float在后；
因?yàn)閣idth在前，所以元素需要占據(jù)空間，可是上一行的空間已經(jīng)沒有了，所以他們會挪到下一行；

-----詳細(xì)資料可以看月影大神給的鏈接--------

可能會有人想，為什么不將float放在前面呢?
因?yàn)閒loat有“包裹性”，設(shè)置了float之后，寬度自適應(yīng)內(nèi)容，此時(shí)再設(shè)置width不起效。

2017年11月20日 15:21