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

資訊專欄INFORMATION COLUMN

css清浮動

EdwardUp / 2126人閱讀

摘要：元素浮動會讓元素脫離文檔流，從而不能撐開父級的內(nèi)容。今天我將展示常見的清除浮動的方法。什么是浮動什么是浮動浮動元素脫離文檔流并且向左或者向右移動，直到浮動元素的邊緣碰到父級框或者另一個(gè)浮動元素的邊框?yàn)橹?。允許浮動元素出現(xiàn)在兩側(cè)。

我們在平常做項(xiàng)目的時(shí)候，float這個(gè)css屬性經(jīng)常會用到。元素浮動會讓元素脫離文檔流，從而不能撐開父級的內(nèi)容。今天我將展示常見的清除浮動的方法。

什么是浮動

浮動元素脫離文檔流并且向左或者向右移動，直到浮動元素的邊緣碰到父級框或者另一個(gè)浮動元素的邊框?yàn)橹埂?/p>

浮動的影響

浮動元素會使得父級元素高度塌陷

html:

    
    
  • 
    
  • 
    
  •

css:

* { // 實(shí)際項(xiàng)目中不要用通配符*去設(shè)置樣式
    margin: 0;
    padding: 0;
}
ul {
    border: 10px solid red;
}
li {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    list-style: none;
    background: orange;
    float: left;
}

效果圖：

由于浮動元素脫離文檔流，不再占據(jù)原來的文檔流空間，不能撐開父級的內(nèi)容，所以父級的高度就不存在了。

下面我們將介紹清浮動的兩個(gè)大類。

清浮動的方法

clear清浮動（clearfix方案）

在css中專門有一個(gè)來解決高度塌陷的屬性，那就是我們常用的clear屬性。clear的用法如下：

clear: none | right | left | both | inherit;

下面對clear值的解釋來之w3c

  • none：默認(rèn)值。允許浮動元素出現(xiàn)在兩側(cè)。
  • right：在右側(cè)不允許浮動元素。
  • left：在左側(cè)不允許浮動元素。
  • both：在左右兩側(cè)均不允許浮動元素。
  • inherit：規(guī)定應(yīng)該從父元素繼承 clear 屬性的值。

我們清除浮動的時(shí)候常用clear: both;，注意： clear屬性只對塊級元素起作用。

下面展示一個(gè)與clear值為both有關(guān)的例子。

html:

    
    
  • 
    
  • 
    
  • 
    
  • 
    
  •

css:

* {
    margin: 0;
    padding: 0;
}
li {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    list-style: none;
    background: orange;
    float: left;
    margin-bottom: 10px;
}
li:nth-child(3) {
    clear: both;
}

上面代碼所渲染出來的效果是下面的圖：

不知道當(dāng)大家看到這個(gè)結(jié)果的時(shí)候，是不是開始懷疑w3c中的解釋了。實(shí)際上clear值為both指的是讓自身和前面的浮動元素不相鄰。沒錯(cuò)，是前面的，并不是前面后面都兼顧，所以上面的例子中展示的效果是兩列而不是三列。

下面展示使用clear清浮動，接著最開始的代碼，我們對其進(jìn)行清浮動。(注意下面只展示在最開始代碼中增加的代碼)

css:

ul {
    zoom: 1;        // 為了兼容IE6/7
}
ul:after {          // 內(nèi)聯(lián)
    content: "";    // 內(nèi)容為空字符是為了不影響本來的dom
    display: block; // 這里的值也可以是table | list-item，只要能夠讓偽類成為塊級元素。
    clear: both;
}

效果圖：

BFC清浮動

BFC的全稱block formatting context，中文意思是“塊級格式化上下文”。

BFC特性

“css世界的結(jié)界”（引自張鑫旭的《css世界》），在這個(gè)結(jié)界中內(nèi)部子元素不管如何變化都不會對外部的元素有影響。BFC元素的margin不會發(fā)生折疊，因?yàn)閙argin折疊影響外部元素的布局。清除浮動，如果BFC不能夠清除浮動，那么BFC元素高度就會塌陷，那么內(nèi)部的元素就會影響到其他的元素的布局，這跟前面說的BFC元素內(nèi)部的子元素不會影響外部元素相違背。

BFC的實(shí)現(xiàn)：（引自張鑫旭的《css世界》）

  • 根元素
  • float的值非none
  • overflow的值為auto、scroll、hidden
  • display的值為table-cell、table-caption和inline-block
  • position的值不為relative和static

css:

ul {
    overflow: auto; // 使浮動元素的父級成為BFC就行可以實(shí)現(xiàn)清浮動
}

效果如下圖：

大家有可能會有疑問只要一句話實(shí)現(xiàn)BFC，那為什么我們還要用上面的clearfix方案？

overflow: auto;不支持IE6/7。overflow: hidden;不支持IE6，使用這個(gè)屬性容器外的元素可能被隱藏。

但是，大家想下現(xiàn)在使用IE6/7/8的用戶還有好多。我個(gè)人覺得現(xiàn)在我們沒必要去管IE6/7/8，拋棄那部分用戶對于我們的影響微不足道。上面這段話只是個(gè)人想法，并沒有想過讓他人必須這樣想，如果大家對這段有什么不滿請輕噴。

最后建議大家不要一味的使用clearfix方案。

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

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

相關(guān)文章

  • CSS清除浮動float的三種方法總結(jié)，為什么清浮動？浮動會有那些影響？

    摘要：方法三據(jù)說是最高大上的方法方法注意作用于浮動元素的父親先說原理這種方法清除浮動是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動，他就是利用和來在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動的效果。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實(shí)現(xiàn)清楚浮動。 一、拋一塊問題磚（display： block）先看現(xiàn)象： showImg(https://segmentfault.com/img/bVrWvS)...

    MAX_zuo 評論0 收藏0

  • 清楚浮動/邊界塌陷bfc

    摘要：不會重疊浮動元素可以包含浮動我們可以利用的第三條特性來清浮動，這里其實(shí)說清浮動已經(jīng)不再合適，應(yīng)該說包含浮動。總而言之清理浮動兩種方式利用屬性，清除浮動使父容器形成 CSS清浮動處理（Clear與BFC）在CSS布局中float屬性經(jīng)常會被用到，但使用float屬性后會使其在普通流中脫離父容器，讓人很苦惱 1 浮動帶來布局的便利，卻也帶來了新問題 復(fù)制代碼 1 2 3 4 ...

    remcarpediem 評論0 收藏0

  • （CSS） 帶有右側(cè)邊欄的響應(yīng)式頁面的CSS樣式

    摘要：一目的要創(chuàng)建一個(gè)響應(yīng)式頁面右側(cè)邊欄為，左側(cè)內(nèi)容為。當(dāng)窗口寬度小于時(shí)，上述在上，在下，隨著窗口大小的變化，二者的與自動調(diào)整。移動到上面實(shí)現(xiàn)的效果如下圖在窗口寬度小于時(shí)，右側(cè)邊欄內(nèi)容在網(wǎng)頁上方顯示，不合格。 一、目的 要創(chuàng)建一個(gè)響應(yīng)式頁面： 右側(cè)邊欄為div.right-bottom，左側(cè)內(nèi)容為div.left-top。 當(dāng)窗口寬度大于700px時(shí)，隨著窗口大小的變化，div.right...

    546669204 評論0 收藏0

  • 前端整理——css部分

    摘要：圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部浮動，但左右兩欄加上負(fù)讓其跟中間欄并排，以形成三欄布局。雙飛翼布局，為了中間內(nèi)容不被遮擋，直接在中間內(nèi)部創(chuàng)建子用于放置內(nèi)容，在該子里用和為左右兩欄留出位置。（1）盒模型（普通盒模型、怪異盒模型） 1、元素的content（內(nèi)容）、padding(內(nèi)邊距)、border（邊框）、margin（外邊距）構(gòu)成了CSS盒模型 2、IE...

    chaosx110 評論0 收藏0

  • 簡述清除浮動

    摘要：為什么要清除浮動影響其他元素定位父盒子高度為，子盒子全部浮動定位，子盒子不會撐開父盒子，下面的元素會到子盒子的下面。清除浮動方法總結(jié)對父級元素設(shè)置高度對父級設(shè)置適合高度樣式清除浮動，一般設(shè)置高度需要能確定內(nèi)容高度才能設(shè)置高度設(shè)置為內(nèi)容高度。 為什么要清除浮動？ 1、影響其他元素定位父盒子高度為0，子盒子全部浮動、定位，子盒子不會撐開父盒子，下面的元素會到子盒子的下面。 2.背景圖片或顏...

    FuisonDesign 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<