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

資訊專欄INFORMATION COLUMN

css浮動及其危害和解決方法

atinosun / 1073人閱讀

摘要：元素向右浮動。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。規(guī)定應(yīng)該從父元素繼承屬性的值。

html元素有三種類型： 
①、塊狀元素： 如div       --------        display：block  
②、內(nèi)聯(lián)元素： 如span      ------      display：inline  
③、內(nèi)聯(lián)塊元素：如input    ----     display：inline-block

在標(biāo)準(zhǔn)流中，三種類型的元素呈現(xiàn)的方式不同
*display:block
元素會獨(dú)占一行，多個block元素會各自新起一行
*inline 和 inline-block
元素不會獨(dú)占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行

如果想block元素像inline元素那些不會自動換行，可以用css的float屬性（浮動）
left --------- 元素向左浮動。
right ------- 元素向右浮動。
none ------ 默認(rèn)值。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。
inherit ---- 規(guī)定應(yīng)該從父元素繼承 float 屬性的值。

雖然浮動很方便，但是也帶來了一定的負(fù)面影響

浮動主要造成了父元素高度塌陷，以至于父元素很多像背景顏色，邊框等都不能正確的顯示出來以及同級子元素的位置

我們先來看一下正常的浮動效果


    

    


.parent{
    width: 300px;
    border: 3px solid black;
    background-color: yellow;
}
.child{
    width: 50px;
    height: 50px;
}
.child1{
    background-color: red;
    float: left;
}
.child2{
    background-color: blue;
    float: right;
}
正常的浮動效果

正常的效果如上圖所示：
我們可以看到父元素本來是設(shè)置的屬性

background-color: yellow
border: 3px solid black

都沒有顯示出來，就是因?yàn)楦釉斐傻母叨忍?/p> 解決浮動的負(fù)面影響

解決后的效果圖

①、給父元素定義高度 
.parent{
    height: 50px;
}
②、給父元素加上overflow：hidden 
.parent{
     overflow: hidden;
}
③、給父元素加上overflow：auto 
.parent{
     overflow: auto;
}
④、給父元素加上display: table 
.parent{
     display: table;
}
⑤、在最后一個子元素上加一個div，使用clear：both
⑥、父元素定義偽類：after 
.parent:after{
    content:"";
    display:block;
    clear:both;
}

在實(shí)際開發(fā)中推薦使用第六種

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

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

相關(guān)文章

  • 前端面試筆記 - css

    摘要：是頁面渲染的一部分。一個就是一個整體，所有子元素都會在里面渲染，而不會影響外面的元素。常見為，根元素，，元素，或者設(shè)置了的元素列舉不同的清除浮動的技巧，并指出它們各自適用的使用場景。是一個把眾多小圖片打包成一個大圖以減少請求。 CSS 中類 (classes) 和 ID 的區(qū)別。 id唯一，class可以多個 請問 resetting 和 normalizing CSS 之間的區(qū)別？你...

    loonggg 評論0 收藏0

  • css中和模型及其相關(guān)的問題

    摘要：是指元素右邊界距窗口最左邊的距離，是指元素下邊界距窗口最上面的距離是什么直譯為塊級格式化上下文。 什么是css和模型又稱框模型 (Box Model) ，包含了元素內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）幾個要素IE模型區(qū)別是寬度和高度不同，標(biāo)準(zhǔn)模型寬度和高度是content的高度，IE模型的寬度是border 和paddingsh...

    megatron 評論0 收藏0

  • css浮動、BFC、定位問題

    摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。產(chǎn)生折疊的必備條件必須是鄰接的而根據(jù)規(guī)范，兩個是鄰接的必須滿足以下條件必須是處于常規(guī)文檔流非和絕對定位的塊級盒子并且處于同一個當(dāng)中。 1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響? 何謂浮動元素？有什么特征？所謂浮動元素，即是設(shè)置了浮動屬性的元素。其特征為： 1.浮動的框可以向左或者向右移動，直到它的外...

    Tony 評論0 收藏0

  • css浮動現(xiàn)象及清除浮動的方法

    css浮動現(xiàn)象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實(shí)現(xiàn)文本環(huán)繞圖片的效果。 除了用浮動外，目前暫無其他方法實(shí)現(xiàn)文本環(huán)繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義： 浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...

    Kyxy 評論0 收藏0

  • css浮動現(xiàn)象及清除浮動的方法

    css浮動現(xiàn)象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實(shí)現(xiàn)文本環(huán)繞圖片的效果。 除了用浮動外，目前暫無其他方法實(shí)現(xiàn)文本環(huán)繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義： 浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...

    weakish 評論0 收藏0

發(fā)表評論

0條評論

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