我所知道的CSS清除浮動(dòng)四種方法

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

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

CSS清除浮動(dòng) 不清除浮動(dòng)會(huì)怎么樣？

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并沒有撐開父容器，這就是我們要清除浮動(dòng)的原因。

解決方法：

在浮動(dòng)元素后面添加 class 為 clear 的空 div 元素，給這個(gè) 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è)置樣式，清除浮動(dòng)

HTML:

CSS:

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

效果：

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

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

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

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

相關(guān)文章

我所知道的CSS清除浮動(dòng)四種方法

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

fnngj 2019-08-29 12:46 評(píng)論0 收藏0
css魔幻屬性跟進(jìn)篇

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

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

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

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

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

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

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

CollinPeng 2019-08-29 12:44 評(píng)論0 收藏0