成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS基礎(chǔ)入門之float

xinhaip / 2384人閱讀

摘要：在正常情況下，頁面總是從左到右，從上到下布局，這種被稱為正常的流。破壞文檔流這是最本質(zhì)的特性，因此設(shè)計(jì)的初衷就是破壞文檔流。但是也有一種情況是，浮動(dòng)元素前后并沒有內(nèi)聯(lián)元素，因此也就不存在行框盒子，這時(shí)候就是浮動(dòng)錨點(diǎn)在起作用。

前幾天有小伙伴說對(duì)float的學(xué)習(xí)云里霧里的，下面我就給大家說一下關(guān)于float的一些問題。

在css中，是存在流的概念的。在正常情況下，頁面總是從左到右，從上到下布局，這種被稱為正常的流。但是有很多情況，正常流是沒辦法實(shí)現(xiàn)的，因此我們需要一些手段來破壞流，從而實(shí)現(xiàn)一些特殊的布局，而本節(jié)的主角float就具備破壞流的特性。

float設(shè)計(jì)的初衷
很多新手在布局的時(shí)候，總喜歡用float來實(shí)現(xiàn)。例如一個(gè)三欄布局，左右固定，中間自適應(yīng)，有些人會(huì)通過float來一列一列把它們砌起來。這樣的布局極其容易崩潰，只要高度或者寬度稍微有些變化，整個(gè)頁面都會(huì)錯(cuò)亂。因此float設(shè)計(jì)的初衷并不是用來布局的，其本意僅僅是實(shí)現(xiàn)圖片文字環(huán)繞效果，即圖片左浮動(dòng)，文字環(huán)繞圖片，如下圖所示：
??

.float {

width: 150px;
float: left;

}
.content {

width: 400px;

}



文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞

float的特性
很多新手一個(gè)元素設(shè)置了float屬性，會(huì)表現(xiàn)出如下特性：
包裹性
塊狀格式化上下文
破壞文檔流
沒有margin合并

包裹性
包裹性包含了包裹和自適應(yīng)兩個(gè)特性。
包裹指的是一個(gè)浮動(dòng)元素，如果子元素寬度足夠小，則浮動(dòng)元素的寬度就是該子元素的寬度，如下所示：
??
.float {

float: left;

}

這是浮動(dòng)元素的子元素


自適應(yīng)指的是如果浮動(dòng)元素的父元素有設(shè)置寬度，并且浮動(dòng)元素的子元素寬度超出了父元素，則浮動(dòng)元素的寬度最終表現(xiàn)為父元素的寬度，如下所示：
??

.father {

width: 100px;

}

.float {

float: left;

}


    這是浮動(dòng)元素的子元素

塊狀格式化上下文
設(shè)定了float的元素，其display的最終值會(huì)表現(xiàn)為block或者table，具體轉(zhuǎn)換如下表：
設(shè)定值計(jì)算值inlineblockinline-blockblockinline-tabletabletable-rowblocktable-row-groupblocktable-columnblocktable-column-groupblocktable-cellblocktable-captionblocktable-header-groupblocktable-footer-groupblock
因此，設(shè)置了float的元素，下面的寫法是多余的：

.float {
    float: left:
    display: block;
}

.float {
    float: left;
    vertical-align: middle; /* 不起作用 */
}

格式化上下文屬于BFC的內(nèi)容，此處先不展開。

破壞文檔流
這是float最本質(zhì)的特性，因此float設(shè)計(jì)的初衷就是破壞文檔流。設(shè)置float的元素，會(huì)導(dǎo)致父元素高度塌陷，我們來看個(gè)例子：
??

.float {

float: left;

}


文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞


可以看到，父元素的高度為0，但這不是bug，而是float本身就是這樣設(shè)計(jì)的，因此只有讓父元素高度塌陷了，后面的元素才有機(jī)會(huì)浮上來。但是僅僅是這樣還是不可以形成圖片環(huán)繞效果的，不然文字浮上來就只會(huì)覆蓋在圖片上面。這里面還隱藏著一個(gè)特性：
行框盒子和浮動(dòng)元素的不可重疊性
意思是說行框盒子和浮動(dòng)元素不會(huì)發(fā)生重疊，因此，下面的文字浮上去之后才不會(huì)覆蓋在圖片之上。即使我們給文字設(shè)置margin負(fù)值也不會(huì)起作用。

沒有margin合并
設(shè)置了float的元素，由于形成了BFC，因此也就沒有了margin合并。

float作用機(jī)制
我們先來看個(gè)例子：
.float {

float: right;

}

標(biāo)題
鏈接


在標(biāo)準(zhǔn)瀏覽器下，“標(biāo)題”和“鏈接”會(huì)在同一行展示，并且“鏈接”會(huì)浮動(dòng)在右邊。但是如果“標(biāo)題”非常長(zhǎng)，一行放不下呢，“鏈接”是浮動(dòng)在第一行還是第二行呢？答案是第二行，要想解釋這個(gè)，我們得先理解兩個(gè)概念，一個(gè)是“浮動(dòng)錨點(diǎn)”，一個(gè)是“浮動(dòng)參考”：

浮動(dòng)錨點(diǎn)是float元素所在的“流”中的一個(gè)點(diǎn)，這個(gè)點(diǎn)本身并不浮動(dòng)，表現(xiàn)得就像是一個(gè)沒有margin、padding和border的空的內(nèi)聯(lián)元素。
浮動(dòng)參考指的是浮動(dòng)元素對(duì)齊參考的實(shí)體。
float元素的“浮動(dòng)參考”是行框盒子，也就是float元素在當(dāng)前“行框盒子”內(nèi)定位，因此，上面的例子“鏈接”會(huì)在第二行展示。但是也有一種情況是，浮動(dòng)元素前后并沒有內(nèi)聯(lián)元素，因此也就不存在行框盒子，這時(shí)候就是“浮動(dòng)錨點(diǎn)”在起作用。因?yàn)椤案?dòng)錨點(diǎn)”表現(xiàn)得像一個(gè)內(nèi)聯(lián)元素，有內(nèi)聯(lián)元素，自然就有行框盒子，只是這個(gè)盒子看不見也摸不著罷了。

float實(shí)現(xiàn)流體布局
前面文字環(huán)繞的例子，只要稍微改造一下就可以實(shí)現(xiàn)兩欄或多欄的自適應(yīng)布局，代碼如下：

.father {

overflow: hidden;
height: 200px;

}

.float {

float: left;
width: 100px;

}

.content {

margin-left: 120px;

}



文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞

總結(jié)
float設(shè)計(jì)的初衷不是布局，而是文字環(huán)繞效果
float的特性：包裹性、塊狀格式化上下文、破壞性、沒有margin合并
float的機(jī)制：浮動(dòng)錨點(diǎn)和浮動(dòng)參考
float實(shí)現(xiàn)自適應(yīng)布局的思路

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114702.html

相關(guān)文章

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對(duì)布局中常見的經(jīng)典問題進(jìn)行簡(jiǎn)單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見的經(jīng)典問題進(jìn)行簡(jiǎn)單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

    Amos 評(píng)論0 收藏0

  • HTML+CSS復(fù)習(xí)之CSS基礎(chǔ)篇

    摘要：內(nèi)容簡(jiǎn)述關(guān)于，確實(shí)太繁雜了，內(nèi)容多。寫好不易，基本上就這個(gè)調(diào)了。里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級(jí)元素的樣式在這里我就列出可以繼承的屬性，和不能繼承的屬性啦不可繼承的和。內(nèi)聯(lián)元素可繼承。每個(gè)瀏覽器可能表現(xiàn)不一樣。 內(nèi)容簡(jiǎn)述 關(guān)于CSS，確實(shí)太繁雜了，內(nèi)容多。寫好不易，基本上就這個(gè)調(diào)了。大家肯定聽過CSS奇淫技巧吧，關(guān)于這個(gè)我還沒有去深入了解，只是說普通的效果啥的，我...

    Salamander 評(píng)論0 收藏0

  • CSS基礎(chǔ)知識(shí)之float

    摘要：前段時(shí)間寫過一篇基礎(chǔ)知識(shí)之，當(dāng)時(shí)對(duì)的理解不太準(zhǔn)確，被慕課網(wǎng)多名讀者指出原文已修正，如有誤導(dǎo)實(shí)在抱歉。浮動(dòng)的基礎(chǔ)知識(shí)浮動(dòng)有個(gè)屬性左浮動(dòng)右浮動(dòng)不浮動(dòng)繼承。浮動(dòng)元素脫離了標(biāo)準(zhǔn)文檔流，文字和行級(jí)元素會(huì)環(huán)繞該元素，塊級(jí)元素則不受影響。 前段時(shí)間寫過一篇CSS基礎(chǔ)知識(shí)之position，當(dāng)時(shí)對(duì)float的理解不太準(zhǔn)確，被慕課網(wǎng)多名讀者指出（原文已修正，如有誤導(dǎo)實(shí)在抱歉）?，F(xiàn)對(duì)float進(jìn)行更深入的...

    wuyangchun 評(píng)論0 收藏0

  • 響應(yīng)式布局入門之——側(cè)欄菜單

    摘要：年月初，中共中央國(guó)務(wù)院發(fā)布了關(guān)于構(gòu)建和諧勞動(dòng)關(guān)系的意見，明確提出切實(shí)保障職工休息休假的權(quán)利，完善并落實(shí)國(guó)家關(guān)于職工工作時(shí)間全國(guó)年節(jié)及紀(jì)念日假期帶薪年休假等規(guī)定。下一步要抓好這項(xiàng)工作的落實(shí)。 一直以來響應(yīng)式布局都是利用的bootstrap來做，但是在手機(jī)上瀏覽的話，bootstrap樣式文件還是有點(diǎn)大 118k，如果再用上一些js庫(kù)的話，上個(gè)幾百k是輕輕松松了，這樣一來用移動(dòng)流量的話真的...

    singerye 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<