成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

了解CSS浮動(dòng)以及清理浮動(dòng)（Float）

TZLLOG / 2433人閱讀

摘要：浮動(dòng)浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框不在文檔的普通流中，相當(dāng)于不占用空間，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

CSS浮動(dòng)

浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框不在文檔的普通流中，相當(dāng)于不占用空間，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

CSS 浮動(dòng)屬性

css中，我們使用float來(lái)實(shí)現(xiàn)浮動(dòng)，使用方法如下：


img{
  float:right;
}
float屬性值有以下幾種：

left：元素向左浮動(dòng)
right：元素向右浮動(dòng)
none：默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其文本出現(xiàn)的位置
inherit：從父元素繼承float屬性

瀏覽器支持

所有的主瀏覽器都支持float，但是IE均不支持"inherit"

CSS浮動(dòng)情形

下面介紹浮動(dòng)的使用情形及問(wèn)題：

如下圖所示，當(dāng)把框1向右浮動(dòng)時(shí)，它脫離文檔流向右移動(dòng)，直到它的右邊框碰到包含框

浮動(dòng)意味著脫離文檔流，可能會(huì)引發(fā)一系列的問(wèn)題，比如，將上圖的框1移向左邊，那么框1在文檔中相當(dāng)于沒(méi)有，框2，框3上移，表現(xiàn)出來(lái)就是框2消失不見(jiàn)

如果想要解決這個(gè)問(wèn)題的話，可以三個(gè)框同時(shí)左移，就不會(huì)有覆蓋的情況，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。

同時(shí)移動(dòng)也帶來(lái)一些問(wèn)題，如果包含框太窄，沒(méi)辦法容納三個(gè)框，這個(gè)時(shí)候該怎么辦?

這個(gè)時(shí)候浮動(dòng)塊就會(huì)進(jìn)行調(diào)節(jié)，如下圖所示，第三個(gè)框會(huì)自動(dòng)向下浮動(dòng)，直到有足夠的空間，如果浮動(dòng)過(guò)程中發(fā)現(xiàn)有浮動(dòng)框高度不一致，則會(huì)被卡住

浮動(dòng)清理

由上我們可以看出，浮動(dòng)會(huì)影響后面的元素，那怎么清理浮動(dòng)呢，現(xiàn)總結(jié)以下幾個(gè)方法：

使用帶clear的空<div>標(biāo)簽

在浮動(dòng)元素后添加一個(gè)空元素，如

,然后在css中添加.clear{clear:both}即可。或者是
,都行(圖片講解更清晰)

這是最為常用的一種辦法，兼容所有主流瀏覽器,但這種辦法使用了大量的無(wú)用標(biāo)簽，不推薦

使用::after偽元素

利用浮動(dòng)元素的容器的::after偽元素來(lái)清楚浮動(dòng)，由于::after偽元素只對(duì)塊級(jí)元素有用，因此要設(shè)置display:block，通過(guò)::after偽元素在浮動(dòng)結(jié)束之后，向其中添加看不見(jiàn)的空格“20”或者是點(diǎn)".",我們也可以使用 content:""

需要注意的是IE6，IE7不支持after偽元素，因此要添加.clearfix{zoom:1}；來(lái)觸發(fā)haslayout，或者你可以把它寫(xiě)到IE6、7的CSS hacker文件里，這樣不會(huì)影響W3C標(biāo)準(zhǔn)驗(yàn)證

使用鄰接元素清除

直接給浮動(dòng)元素的下一個(gè)元素添加一個(gè)clear：both；但是要注意一點(diǎn)，必須保證這個(gè)元素和浮動(dòng)元素是在一層container中，如果在浮動(dòng)元素的下一層的話，還是老老實(shí)實(shí)用::after偽元素吧

使用overflow屬性

給浮動(dòng)元素的容器添加overflow:hidden；(overflow:auto)。
這個(gè)辦法很有意思啊，我們知道，在使用float之后，元素會(huì)調(diào)到容器上層，但是使用overflow:hidden；之后，浮動(dòng)元素又回到了容器中，把容器高度撐起，達(dá)到了清理浮動(dòng)的作用（詳解見(jiàn)圖）

將容器設(shè)置成float

給浮動(dòng)元素的容器也添加上浮動(dòng)屬性即可清理內(nèi)部浮動(dòng)。同overflow法一樣無(wú)須添加額外的class，使用方便但是會(huì)對(duì)下面的文檔造成影響。

這種做法屬于一時(shí)爽的類(lèi)型，因?yàn)榻o容器設(shè)置浮動(dòng)之后，對(duì)后面的布局也產(chǎn)生影響，不建議使用

使用display:table

采用display:table/display:table-cell 等table系列屬性將父元素變成 table 形式自動(dòng)包含浮動(dòng)元素。當(dāng)容器被設(shè)置成了table或table-cell時(shí)，同時(shí)也創(chuàng)建了css2規(guī)定的block formatting contexts，這樣父容器就包含了元素的高度

為什么我把它放在這么后面呢，因?yàn)?，兼容性?wèn)題又來(lái)了。。display:talbe 系列樣式設(shè)定不在 IE6/7 的支持范圍之內(nèi)

觸發(fā) hasLayout 清除

為了解決殺千刀的IE，特地來(lái)解決一下,首先，我們了解一下IE里的layout：
"layout"是IE的專(zhuān)有概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位和計(jì)算，與其他元素的關(guān)系和相互作用，以及對(duì)應(yīng)用還有使用者的影響
"Layout" 可以被某些 CSS property（特性）不可逆的觸發(fā)，而某些 HTML 元素本身就具有 layout 。
"Layout" 在 IE 中可以通過(guò) hasLayout 屬性來(lái)判斷一個(gè)元素是否擁有 layout ，如 object.currentStyle.hasLayout 。
"Layout" 是 IE 瀏覽器渲染引擎的一個(gè)內(nèi)部組成部分。在 IE 瀏覽器中，一個(gè)元素要么自己對(duì)自身的內(nèi)容進(jìn)行組織和計(jì)算大小， 要么依賴于包含塊來(lái)計(jì)算尺寸和組織內(nèi)容。為了協(xié)調(diào)這兩種方式的矛盾，渲染引擎采用了 "hasLayout" 屬性，屬性值可以為 true 或 false。 當(dāng)一個(gè)元素的 "hasLayout" 屬性值為 true 時(shí)，我們說(shuō)這個(gè)元素有一個(gè)布局（layout），或擁有布局。

看到這兒我們就很清楚了嘛，觸發(fā)一下layout就可以清楚浮動(dòng)了嘛，所以我們可以對(duì)容器用以下幾種姿勢(shì)來(lái)清除浮動(dòng)


haslayout-clear-float:{width:1px}
或
.haslayout-clear-float:{height:1px}
或
.haslayout-clear-float:{zoom:1}

可觸發(fā) hasLayout 的 CSS 特性有以下幾種：
display: inline-block;
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute;
writing-mode: tb-rl;
zoom: (除 normal 外任意值)

注意：layout屬性只有IE有，并且IE6以前的版本任何的height和width都會(huì)觸發(fā)layout屬性，可以依靠計(jì)算布局清理浮動(dòng)的 haslayout 特性僅在 IE 6/7 中存在，IE8 之后將使用 CSS 2.1 的 Block Formatting Contexts 定義來(lái)達(dá)到同樣效果。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111046.html

相關(guān)文章

  • CSS布局 ——從display，position， float屬性談起

    摘要：生成相對(duì)定位的元素，相對(duì)于元素本身正常位置進(jìn)行定位。元素的位置通過(guò)以及屬性進(jìn)行規(guī)定。因?yàn)榻^對(duì)定位與文檔流無(wú)關(guān)，所以絕對(duì)定位的元素可以覆蓋頁(yè)面上的其他元素，可以通過(guò)屬性控制疊放順序，越高，元素位置越靠上。頁(yè)面布局，或者是在頁(yè)面上做些小效果的時(shí)候經(jīng)常會(huì)用到 display,position和float 屬性，如果對(duì)它們不是很了解的話，很容易出現(xiàn)一些莫名其妙的效果，痛定思痛讀了《CSS Maste...

    hover_lew 評(píng)論0 收藏0

  • 簡(jiǎn)述清除浮動(dòng)

    摘要：為什么要清除浮動(dòng)影響其他元素定位父盒子高度為，子盒子全部浮動(dòng)定位，子盒子不會(huì)撐開(kāi)父盒子，下面的元素會(huì)到子盒子的下面。清除浮動(dòng)方法總結(jié)對(duì)父級(jí)元素設(shè)置高度對(duì)父級(jí)設(shè)置適合高度樣式清除浮動(dòng)，一般設(shè)置高度需要能確定內(nèi)容高度才能設(shè)置高度設(shè)置為內(nèi)容高度。 為什么要清除浮動(dòng)？ 1、影響其他元素定位父盒子高度為0，子盒子全部浮動(dòng)、定位，子盒子不會(huì)撐開(kāi)父盒子，下面的元素會(huì)到子盒子的下面。 2.背景圖片或顏...

    FuisonDesign 評(píng)論0 收藏0

  • CSS-清除浮動(dòng)

    摘要：清除浮動(dòng)方法方法一使用帶屬性的空元素在浮動(dòng)元素后使用一個(gè)空元素如，并在中賦予屬性即可清理浮動(dòng)。 什么是CSS清除浮動(dòng)？ 在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素，在這種情況下，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。這個(gè)現(xiàn)象叫浮動(dòng)溢出，為了防止這個(gè)現(xiàn)象...

    劉厚水 評(píng)論0 收藏0

  • 清楚浮動(dòng)/邊界塌陷bfc

    摘要：不會(huì)重疊浮動(dòng)元素可以包含浮動(dòng)我們可以利用的第三條特性來(lái)清浮動(dòng)，這里其實(shí)說(shuō)清浮動(dòng)已經(jīng)不再合適，應(yīng)該說(shuō)包含浮動(dòng)?？偠灾謇砀?dòng)兩種方式利用屬性，清除浮動(dòng)使父容器形成 CSS清浮動(dòng)處理（Clear與BFC）在CSS布局中float屬性經(jīng)常會(huì)被用到，但使用float屬性后會(huì)使其在普通流中脫離父容器，讓人很苦惱 1 浮動(dòng)帶來(lái)布局的便利，卻也帶來(lái)了新問(wèn)題 復(fù)制代碼 1 2 3 4 ...

    remcarpediem 評(píng)論0 收藏0

  • 理解CSS浮動(dòng)與清理

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

    Tonny 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<