亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

float浮動(dòng)-清浮動(dòng)BFC渲染機(jī)制

PrototypeZ / 735人閱讀

摘要：浮動(dòng)，用于橫向布局。浮動(dòng)會(huì)破壞，即浮動(dòng)元素脫離文檔流當(dāng)給一個(gè)元素設(shè)置浮動(dòng)了之后，它不會(huì)再占用頁面當(dāng)中的位置了，造成的影響不會(huì)撐開父級(jí)的高度。如下圖想要解決這個(gè)影響，就得清浮動(dòng)清除浮動(dòng)所造成的影響了。

float浮動(dòng)，用于橫向布局。

起初的橫向布局都用display:inline-block，但是這會(huì)導(dǎo)致兩個(gè)元素之間有空隙，而這是由代碼換行解析成空格的，解決元素間有空隙，空格：font-size:0;,但影響很大。 ? float浮動(dòng)會(huì)破壞line-box，即浮動(dòng)元素脫離文檔流（當(dāng)給一個(gè)元素設(shè)置浮動(dòng)了之后，它不會(huì)再占用頁面當(dāng)中的“位置”了），造成的影響：不會(huì)撐開父級(jí)的高度。如下圖： 想要解決這個(gè)影響，就得清浮動(dòng)（清除浮動(dòng)所造成的影響）了。 清浮動(dòng)后，如下： 清浮動(dòng)的方法： 1.給浮動(dòng)元素的父級(jí)加高度 　　拓展性不好 　　在不能確定父級(jí)高度的情況下不能使用 ? 2.clear:both(用得最多的方法) 　　*zoom:1 用來觸發(fā) hasLayout(IE瀏覽器的BFC) 
.clear{
     *zoom: 1;/*兼容IE6,7*/
}
.clear:after{
      content: ";
      display: block;
      clear: both;
}

?

3.BFC(是一套渲染機(jī)制) 　　觸發(fā)一個(gè)元素的BFC（Block?Formatting?Contexts，即塊級(jí)格式化上下文） 　　相當(dāng)于在這個(gè)元素里面建立起一堵圍墻 　　圍墻里面的內(nèi)容和圍墻外面的內(nèi)容不會(huì)產(chǎn)生干擾，如： 
overflow: hidden;

?

想要觸發(fā)BFC的方式（滿足任一條件即可）： （1）float的值不為none； ? ? （2）overflow的值不為visible； ? ? （3）display的值為inline-block, table-cell, table-caption, flex, inline-flex之一； ? ? （4）position的值不為static或則releative中的任何一個(gè)。

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/1234.html

相關(guān)文章

  • css清浮動(dòng)

    摘要：元素浮動(dòng)會(huì)讓元素脫離文檔流，從而不能撐開父級(jí)的內(nèi)容。今天我將展示常見的清除浮動(dòng)的方法。什么是浮動(dòng)什么是浮動(dòng)浮動(dòng)元素脫離文檔流并且向左或者向右移動(dòng)，直到浮動(dòng)元素的邊緣碰到父級(jí)框或者另一個(gè)浮動(dòng)元素的邊框?yàn)橹?。允許浮動(dòng)元素出現(xiàn)在兩側(cè)。我們在平常做項(xiàng)目的時(shí)候，float這個(gè)css屬性經(jīng)常會(huì)用到。元素浮動(dòng)會(huì)讓元素脫離文檔流，從而不能撐開父級(jí)的內(nèi)容。今天我將展示常見的清除浮動(dòng)的方法。 什么是浮動(dòng) 浮動(dòng)元...

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

  • 如何清除浮動(dòng)

    摘要：本文概述本文的框架圖如下一浮動(dòng)到底是什么中給出的浮動(dòng)定義為浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。如果把所有三個(gè)框都向左浮動(dòng)，那么框向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。 本文概述 本文的框架圖如下： showImg(https://segmentfault.com/img/remote/1460000016978861?...

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

  • 如何清除浮動(dòng)

    摘要：本文概述本文的框架圖如下一浮動(dòng)到底是什么中給出的浮動(dòng)定義為浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｈ绻阉腥齻€(gè)框都向左浮動(dòng)，那么框向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。 本文概述 本文的框架圖如下： showImg(https://segmentfault.com/img/remote/1460000016978861?...

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

  • 如何清除浮動(dòng)

    摘要：本文概述本文的框架圖如下一浮動(dòng)到底是什么中給出的浮動(dòng)定義為浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。如果把所有三個(gè)框都向左浮動(dòng)，那么框向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。 本文概述 本文的框架圖如下： showImg(https://segmentfault.com/img/remote/1460000016978861?...

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

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

0條評(píng)論

PrototypeZ

男|高級(jí)講師

TA的文章

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