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

資訊專欄INFORMATION COLUMN

css清除浮動(dòng)常用的四種方法實(shí)現(xiàn)

iliyaku / 1705人閱讀

摘要：用這種方法清除浮動(dòng)，會(huì)為文檔中增加不必要的結(jié)構(gòu)，不推薦。可以包含浮動(dòng)元素，所以能實(shí)現(xiàn)撐起高度的效果。以上是常用的幾種方法，可以根據(jù)場景的不同選擇適合的。

在頁面布局中經(jīng)常會(huì)用到浮動(dòng)和清除浮動(dòng)的操作，但之前是知其然而不知其所以然，看過多篇文章后，有了一些深入的了解，特整理下來！

浮動(dòng)的目的：

最初設(shè)計(jì)浮動(dòng)的目的是為了實(shí)現(xiàn)文字等內(nèi)容可圍繞圖像顯示，后來發(fā)現(xiàn)浮動(dòng)方便布局，所以支持浮動(dòng)任何元素，元素設(shè)置浮動(dòng)后，會(huì)脫離原先文檔的普通流中，讓原先各自占據(jù)一行的塊元素在一行顯示，代碼展示如下：

不設(shè)置浮動(dòng)顯示如下

如果只設(shè)置a塊floagt:left:結(jié)果如下：

a塊脫離了原先的文檔普通流，不再占據(jù)原先的位置，所以b移移動(dòng)到原先a的位置，因?yàn)閍是浮動(dòng)的，所以會(huì)遮擋住b，因?yàn)楦冈貨]有設(shè)置高度，所以父元素的高度由子元素決定，現(xiàn)在為b的高度，a浮動(dòng)后，超出了父元素的高度。

現(xiàn)在把b塊也設(shè)置floagt:left，就實(shí)現(xiàn)了2個(gè)塊狀元素在一行顯示：

現(xiàn)在看到雖然實(shí)現(xiàn)了2個(gè)塊狀元素在一行顯示，但是父元素的高度現(xiàn)在為0，會(huì)影響到兄弟元素的排版，所以我們現(xiàn)在要解決這個(gè)問題，就用到了清除浮動(dòng)的操作

清除浮動(dòng)的方法

清除浮動(dòng)后正常的顯示如下圖：

1、在父元素高度固定的情況下，可以直接設(shè)置父元素的高度height: 200px即可正常顯示

2、增加塊元素，用clear:both清除

clear：both是清除此元素左右2邊的浮動(dòng)，所以此元素會(huì)獨(dú)占一行，在a、b的下一行，但clear仍然在文檔流中，必須包含在父元素內(nèi)，所以父元素為了包含clear，只能增加高度，最終的效果就達(dá)到了高度被撐起來。
用這種方法清除浮動(dòng)，會(huì)為文檔中增加不必要的結(jié)構(gòu)，不推薦。

3、 給父元素設(shè)置overflow清除浮動(dòng)

overflow值可以是除visible之外的任何值，都能達(dá)到撐起高度的效果，但是scroll是導(dǎo)致滾動(dòng)條始終存在，hidden會(huì)隱藏超出邊框的部分，所以在選擇的時(shí)候要格外注意
為什么overflow會(huì)實(shí)現(xiàn)這種效果呢？是因?yàn)樗且粋€(gè)塊級(jí)格式化上下文 (Block Fromatting Context)，W3C對(duì)BFC的定義如下：
浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）。
BCF可以包含浮動(dòng)元素，所以能實(shí)現(xiàn)撐起高度的效果。

4、使用after偽類

跟第2個(gè)方法原理類似，只是區(qū)別在于:clear在html中插入一個(gè)div.clear標(biāo)簽，而content 利用其偽類clear:after在元素內(nèi)部增加一個(gè)類似于div.clear的效果。
以上是常用的幾種方法，可以根據(jù)場景的不同選擇適合的。

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

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

相關(guān)文章

  • 【CSS學(xué)習(xí)】--- float浮動(dòng)屬性

    摘要：浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間，行框圍繞浮動(dòng)框。不浮動(dòng)的浮動(dòng)的三浮動(dòng)之于塊浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂? 一、前言 ? 　　浮動(dòng)元素以脫離標(biāo)準(zhǔn)流的方式來實(shí)現(xiàn)元素的向左或向右浮動(dòng)，并且浮動(dòng)元素還是在原來的行上進(jìn)行浮動(dòng)的。float浮動(dòng)屬性的四個(gè)參數(shù)：left：元素向左浮動(dòng)；right：元素向右浮動(dòng)；none：默認(rèn)值，元素不浮動(dòng)；i...

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

  • CSS的再深入3（更新中···）

    摘要：而第一個(gè)依然存在，所以就會(huì)疊加。宋體行級(jí)加只要加了，這個(gè)元素就會(huì)脫離標(biāo)準(zhǔn)文檔流行級(jí)元素加了，脫離了標(biāo)準(zhǔn)文檔流，會(huì)變得塊不像塊，行不像行，能設(shè)置快高，能并排排列，則也不用給行級(jí)標(biāo)簽加了，沒有意義。在前面，我們學(xué)習(xí)了標(biāo)準(zhǔn)文檔流，但在實(shí)際制作的過程中，用標(biāo)準(zhǔn)文檔流書寫顯然是不現(xiàn)實(shí)的，因此，我們來了解幾種脫離標(biāo)準(zhǔn)文檔流的方法： 1.float 浮動(dòng) float：left/right；（左浮/右?。?...

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

  • CSS三欄布局的四種方法

    摘要：浮動(dòng)代碼如下注意元素次序代碼如下左欄左浮動(dòng)中間自適應(yīng)右欄右浮動(dòng)這種方式代碼足夠簡潔與高效，也容易理解后記四種方法其實(shí)只有圣杯布局和雙飛翼布局較難理解，但實(shí)際上理解了圣杯布局，雙飛翼布局自然就理解了。 前言 總括： 不管是三欄布局還是兩欄布局都是我們?cè)谄綍r(shí)項(xiàng)目里經(jīng)常使用的，也許你不知道什么事三欄布局什么是兩欄布局但實(shí)際已經(jīng)在用，或許你知道三欄布局的一種或兩種方法，但實(shí)際操作中也只會(huì)依賴那...

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

  • 重拾css(9)——float

    摘要：導(dǎo)致這一現(xiàn)象的最根本原因在于被設(shè)置了的元素會(huì)脫離文檔流。脫離文檔流可以理解為子元素與父元素間的結(jié)構(gòu)被破壞，父子關(guān)系解除。 1.引言 對(duì)于我們所有的web前端開發(fā)人員，float是或者曾經(jīng)一度是你最熟悉的陌生人——你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那么一點(diǎn)知識(shí)，但卻駕馭不了它各種奇怪的現(xiàn)象。這就是我們又愛又恨的——float。所以，系統(tǒng)的學(xué)一學(xué)float是非常...

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

  • 淺析BFC布局的概念以及作用

    摘要：的概念以及作用的概念以及作用的定義的定義直譯為塊級(jí)格式化上下文。是的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。BFC的概念以及作用 BFC的定義： (Block formatting context)直譯為塊級(jí)格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)...

    荊兆峰 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<