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

資訊專欄INFORMATION COLUMN

浮動影響

zhaofeihao / 1204人閱讀

摘要：四包含關(guān)系的盒子，可能情況里面盒子浮動，包住它的盒子不浮動時，父盒子背景無顯示原因由于元素浮動后脫離了文檔流，所以父元素是無法根據(jù)元素來自適應(yīng)的。

一、浮動元素自動變塊級元素

非浮動元素占據(jù)浮動元素位置，浮動元素不能占據(jù)非浮動元素位置？？？向上占據(jù)

浮動元素會被自動設(shè)置成塊級元素，相當(dāng)于給元素設(shè)置了display:block（塊級元素能設(shè)置寬和高，而行內(nèi)元素則不可以）。

 

浮動元素span
 

 

 

非浮動元素span

二、并列關(guān)系的盒子，不一致地浮動，位置問題

元素浮動會對后面非浮動的兄弟元素產(chǎn)生影響

可能情況

后邊若是非浮動行內(nèi)元素，且因為定位產(chǎn)生重疊時，行內(nèi)盒子模型壓在該浮動元素之上

后邊若是非浮動塊級元素，且在定位后產(chǎn)生重疊時，該塊級的內(nèi)容圍繞該浮動元素顯示，其他在該浮動元素底下

示例代碼如下：

 


 
    浮動DIV

 


 
    跟在浮動元素后邊的DIV

 

 
    跟在浮動元素后邊的span

效果如下

不過在ie6這個效果卻很怪異，如圖：


浮動元素沒有壓在非浮動div之上，反而把span壓住了。

解決辦法

對被浮動影響的元素添加clear:both

三、并列關(guān)系的盒子，一致地同方向浮動，高度不一致問題

多個同方向浮動元素一般是按照流式布局，一行滿了則自動換行，也就是類似于以下效果：

但各個浮動元素高度不一致的話效果很可能出現(xiàn)下邊的情況：

原因

主要排列到元素7的時候，一行已經(jīng)顯示不下了，所以要換行，但此處換行并不是從行頭開始，而是從元素5那開始，因為元素5比元素6高很多導(dǎo)致。

四、包含關(guān)系的盒子， 可能情況

里面盒子浮動，包住它的盒子不浮動時，父盒子背景無顯示

原因

由于元素浮動后脫離了文檔流，所以父元素是無法根據(jù)元素來自適應(yīng)的。

解決辦法1 clear:both 用法

在所有浮動元素后加: 

 

TEST DIV

（1）有clear:both的：

（2）無clear:both的

原理

子元素浮動后，因為脫離文檔流，所以父元素包含不住，無法撐開。由于沒有現(xiàn)有的元素可以應(yīng)用清理，所以我們只能添加一個空元素并且清理它。

解決辦法2 overflow 用法 




    
div1

    
div2

原理

在父元素上設(shè)置overflow這個屬性，如果父元素的這個屬性設(shè)置為auto或者是hidden，父元素就會擴展包含浮動，這個方法有著比較好的語義性，因為它不需要額外的元素，但是，要記住一點，overflow屬性不是為了清除浮動而定義的，要小心不要覆蓋住內(nèi)容或者觸發(fā)了不需要的滾動條。

解決辦法3 clearfix類 用法 
 




    
div1

    
div2
原理：

這種方式這樣理解，就是利用偽類元素，也就是在有浮動的標(biāo)簽前面添加一個塊級元素，來達(dá)到效果。

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

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

相關(guān)文章

  • css浮動的理解

    摘要：浮動的理解什么是浮動概念浮動是指的是的屬性。對于設(shè)置了浮動的元素，在頁面效果上可以通俗的理解為這個元素漂起來了在水上，位置發(fā)生變化，不按代碼中排列。關(guān)于浮動，后續(xù)會總結(jié)以下消除浮動影響的相關(guān)內(nèi)容。 css浮動的理解 什么是浮動 概念 浮動是指的是css的屬性float。對于設(shè)置了浮動的元素，在頁面效果上可以通俗的理解為這個元素漂起來了（在水上），位置發(fā)生變化，不按HTML代碼中排列。從...

    WilsonLiu95 評論0 收藏0

  • 帶你徹底了解CSS浮動（文字整理版）

    摘要：謝老板謝然最近在講堂上開了一個視頻課程帶你徹底掌握浮動，因為視頻比較長分鐘，不方便回顧，我將之做了一個整理，并從我自己理解的角度進(jìn)行了闡述，以做記錄。相應(yīng)的背景文檔浮動結(jié)語以上就是謝老板在視頻中的內(nèi)容，希望幫助到大家。 謝老板（謝然）最近在segmentfault講堂上開了一個視頻課程《帶你徹底掌握CSS浮動》，因為視頻比較長（69分鐘），不方便回顧，我將之做了一個整理，并從我自己理解...

    AlphaWatch 評論0 收藏0

  • 理解CSS浮動與清理

    摘要：浮動為什么會有文本環(huán)繞效果產(chǎn)生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。 作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現(xiàn)很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。 本文主要討論以下幾個問題：1.浮動的原始用途...

    Tonny 評論0 收藏0

  • 理解CSS浮動與清理

    摘要：浮動為什么會有文本環(huán)繞效果產(chǎn)生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。 作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現(xiàn)很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。 本文主要討論以下幾個問題：1.浮動的原始用途...

    cyqian 評論0 收藏0

  • 為什么設(shè)置overflow為hidden可以清除浮動帶來的影響

    摘要：以下情況會觸發(fā)根元素的值不為的值為，，的值為，和中的任何一個的值不為和顯然我們在設(shè)置值為時使元素具有，那么子元素浮動便不會帶來父元素的高度坍塌影響。1.問題起源　　 　　在平時的業(yè)務(wù)開發(fā)寫CSS中，為了滿足頁面布局，元素的浮動特性我們用的不能再多了。使用浮動的確能夠解決一些布局問題，但是也帶了一些副作用影響，比如，父元素高度塌陷，我們有好幾種可以清除浮動的方法，最常用的就是設(shè)置父元素的ove...

    JeOam 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<