我所知道的CSS清除浮動四種方法

ranwu 發(fā)布于2019-08-01 16:58 / 2448人閱讀

摘要：清除浮動不清除浮動會怎么樣效果子元素并沒有撐開父容器，這就是我們要清除浮動的原因。

CSS清除浮動 不清除浮動會怎么樣？

HTML:

CSS:

.container{
        width: 300px;
        border: 1px solid #000;
        background-color: #aaa;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: #ffff00;
        float: left;

    }
    .right{
        width: 100px;
        height: 100px;
        background-color: #fa0000;
        float: right;
    }

效果：

子元素div并沒有撐開父容器，這就是我們要清除浮動的原因。

解決方法：

在浮動元素后面添加 class 為 clear 的空 div 元素，給這個 div 設(shè)置樣式 .clear{clear:both;}

HTML:

CSS:

.clear{
      clear:both;
   }

效果：

給父容器添加 overflow:hidden 或者 auto 樣式

HTML:

CSS:

.container{
         width: 300px;
        border: 1px solid #000;
        background-color: #aaa;
        overflow:hidden; /*或者auto */
        zoom:1;   /*IE6*/
    }

效果：

給父容器添加 clearfix 的 class ，用偽元素 clearfix：after 來設(shè)置樣式，清除浮動

HTML:

CSS:

.clearfix{
        zoom: 1;                     /*IE6*/
    }
    .clearfix:after{
        content: ".";
        height: 0;
        clear: both;
        display: block;
        visibility: hidden;
    }

效果：

給父容器添加浮動，這種方法用于本身父元素就是浮動的情況下，一般不使用這種方法，

GPU云服務(wù)器云服務(wù)器我所知道數(shù)據(jù)遷移的四種方法的清除方法清除浮動

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50866.html

相關(guān)文章

我所知道的CSS清除浮動四種方法

摘要：清除浮動不清除浮動會怎么樣效果子元素并沒有撐開父容器，這就是我們要清除浮動的原因。 CSS清除浮動不清除浮動會怎么樣？ HTML: CSS: .container{ width: 300px; border: 1px solid #000; background-color: #aaa; } .lef...

fnngj 2019-08-29 12:46 評論0 收藏0
css魔幻屬性跟進篇

摘要：中是這樣定義的屬性指定一個元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。其同樣適用于設(shè)置屬性為絕對定位或固定定位的內(nèi)聯(lián)元素。至于為什么，可以理解為內(nèi)聯(lián)元素沒有盒模型，其高度由內(nèi)容決定。白話：即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后，這是自己寫的第四篇CSS相關(guān)的文章，文章絕大部分是自己工作總結(jié)得來，另一部分是平日sf回答的與面試中向面試官交流學(xué)到的，都是一...

oogh 2019-08-30 14:16 評論0 收藏0
css清除浮動常用的四種方法實現(xiàn)

摘要：用這種方法清除浮動，會為文檔中增加不必要的結(jié)構(gòu)，不推薦。可以包含浮動元素，所以能實現(xiàn)撐起高度的效果。以上是常用的幾種方法，可以根據(jù)場景的不同選擇適合的。在頁面布局中經(jīng)常會用到浮動和清除浮動的操作，但之前是知其然而不知其所以然，看過多篇文章后，有了一些深入的了解，特整理下來！浮動的目的：最初設(shè)計浮動的目的是為了實現(xiàn)文字等內(nèi)容可圍繞圖像顯示，后來發(fā)現(xiàn)浮動方便布局，所以支持浮動任何元素...

iliyaku 2019-08-29 16:14 評論0 收藏0
【CSS學(xué)習(xí)】--- float浮動屬性

摘要：浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。不浮動的浮動的三浮動之于塊浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。? 一、前言 ? 　　浮動元素以脫離標(biāo)準(zhǔn)流的方式來實現(xiàn)元素的向左或向右浮動，并且浮動元素還是在原來的行上進行浮動的。float浮動屬性的四個參數(shù)：left：元素向左浮動；right：元素向右浮動；none：默認值，元素不浮動；i...

TigerChain 2019-04-23 11:48 評論0 收藏0
重拾css(9)——float

摘要：導(dǎo)致這一現(xiàn)象的最根本原因在于被設(shè)置了的元素會脫離文檔流。脫離文檔流可以理解為子元素與父元素間的結(jié)構(gòu)被破壞，父子關(guān)系解除。 1.引言對于我們所有的web前端開發(fā)人員，float是或者曾經(jīng)一度是你最熟悉的陌生人——你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那么一點知識，但卻駕馭不了它各種奇怪的現(xiàn)象。這就是我們又愛又恨的——float。所以，系統(tǒng)的學(xué)一學(xué)float是非常...

CollinPeng 2019-08-29 12:44 評論0 收藏0