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

atinosun 發布于2019-08-30 15:55 / 1038人閱讀

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

html元素有三種類型：

①、塊狀元素： 如div       --------        display：block  
②、內聯元素： 如span      ------      display：inline  
③、內聯塊元素：如input    ----     display：inline-block

在標準流中，三種類型的元素呈現的方式不同
*display:block
元素會獨占一行，多個block元素會各自新起一行
*inline 和 inline-block
元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行

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

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

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

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

.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;
}

正常的浮動效果

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

background-color: yellow
border: 3px solid black

都沒有顯示出來，就是因為浮動造成的高度坍塌！

解決浮動的負面影響

解決后的效果圖

①、給父元素定義高度

.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;
}

在實際開發中推薦使用第六種

云服務器 GPU云服務器浮動-前端-css dns域名格式及其解析方法免費域名空間及其使用方法解決方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117173.html

前端面試筆記 - css

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

loonggg 2019-08-23 14:50 評論0 收藏0
css中和模型及其相關的問題

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

megatron 2019-08-29 17:24 評論0 收藏0
css浮動、BFC、定位問題

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

Tony 2019-08-29 12:53 評論0 收藏0
css浮動現象及清除浮動的方法

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

Kyxy 2019-08-29 16:29 評論0 收藏0
css浮動現象及清除浮動的方法

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

weakish 2019-08-02 11:19 評論0 收藏0