欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css中float left與float right的使用說明

  發(fā)布時(shí)間:2010-12-27 15:02:34   作者:佚名   我要評(píng)論
CSS中很多時(shí)候會(huì)用到浮動(dòng)來(lái)布局,也就是經(jīng)常見到的float:left或者float:right,簡(jiǎn)單點(diǎn)來(lái)說,前者是左浮動(dòng)(往左側(cè)向前邊的非浮動(dòng)元素飄,全是飄得元素的話,就按照流式來(lái)浮動(dòng)從左到右,放不下則換行),后者是右?。ㄍ绎h)動(dòng)。但僅僅是如此嗎?
No!
要注意以下幾點(diǎn):
1、 浮動(dòng)元素會(huì)被自動(dòng)設(shè)置成塊級(jí)元素,相當(dāng)于給元素設(shè)置了display:block(塊級(jí)元素能設(shè)置寬和高,而行內(nèi)元素則不可以)。
2、 浮動(dòng)元素后邊的非浮動(dòng)元素顯示問題。
3、 多個(gè)浮動(dòng)方向一致的元素使用流式排列,此時(shí)要注意浮動(dòng)元素的高度。
4、子元素全為浮動(dòng)元素的元素高度自適應(yīng)問題。

以下詳細(xì)分析四個(gè)問題。

一、浮動(dòng)元素自動(dòng)變塊級(jí)元素
首先說說塊級(jí)元素和行內(nèi)元素區(qū)別,簡(jiǎn)單的來(lái)說,塊級(jí)元素獨(dú)占一行,可以設(shè)置寬高以及邊距,行內(nèi)元素不會(huì)獨(dú)占一行,設(shè)置寬高行距等不會(huì)起效。常見的塊級(jí)元素有:h1~h6、p、div、ul、table,常見的行內(nèi)元素有:span、a、input、select等。

示例代碼:

復(fù)制代碼
代碼如下:

<div style="height: 200px; width: 200px;">
<span style="float: left; width: 150px; height: 150px; margin: 5px; padding: 5px;
border: solid 1px red; background-color: Olive;">浮動(dòng)元素span</span>
</div>
<div style="height: 200px; width: 200px;">
<span style="width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red;
background-color: Olive;">浮動(dòng)元素span</span>
</div>


效果如下:

二、浮動(dòng)元素后的非浮動(dòng)元素問題
浮動(dòng)元素后邊的元素若是非浮動(dòng)行內(nèi)元素且因?yàn)槎ㄎ划a(chǎn)生重疊時(shí),行內(nèi)元素邊框、背景和內(nèi)容都在該浮動(dòng)元素“之上”顯示,若是非浮動(dòng)塊級(jí)元素跟在浮動(dòng)元素后邊且在定位后產(chǎn)生重疊時(shí),該塊級(jí)元素邊框和背景在該浮動(dòng)元素“之下”顯示,只有內(nèi)容在浮動(dòng)元素不在浮動(dòng)元素“之下”顯示。
示例代碼如下:

復(fù)制代碼
代碼如下:

<div style="width: 600px; height: 500px; border: solid 1px blue; background-color: yellow;">
<div style="float: left; width: 250px; height: 250px; border: solid 1px Aqua; background-color: gray;
margin: 10px 0 0 10px;">
浮動(dòng)DIV</div>
<div style="background-color: red; border: solid 1px green; width: 300px; height: 150px;">
跟在浮動(dòng)元素后邊的DIV</div>
<span style="background-color: red; border: solid 1px green; margin: 0 0 0 -50px;">
跟在浮動(dòng)元素后邊的span</span>
</div>


效果圖如下:

從圖中可以看出來(lái),跟在浮動(dòng)div后邊的div背景以及邊框被壓在了底下,內(nèi)容卻沒有,span整體都在浮動(dòng)div之上顯示。 

不過在ie6這個(gè)效果卻很怪異,如圖:


浮動(dòng)元素沒有壓在非浮動(dòng)div之上,反而把span壓住了。
三、多個(gè)并列同方向浮動(dòng)元素高度不一致問題
多個(gè)同方向浮動(dòng)元素若是高度不一致的話,很可能會(huì)得到意外的效果,跟你想要的布局差別很大。多個(gè)同方向浮動(dòng)元素一般是按照流式布局,一行滿了則自動(dòng)換行,也就是類似于以下效果:

但各個(gè)浮動(dòng)元素高度不一致的話效果很可能出現(xiàn)下邊的情況:

很意外吧,主要排列到元素7的時(shí)候,一行已經(jīng)顯示不下了,所以要換行,但此處換行并不是從行頭開始,而是從元素5那開始,因?yàn)樵?比元素6高很多導(dǎo)致。
四、子元素全為浮動(dòng)元素高度自適應(yīng)問題
由于元素浮動(dòng)后脫離了文檔流,所以父元素是無(wú)法根據(jù)元素來(lái)自適應(yīng)的。解決此問題最常用的辦法由兩種,第一種就是在所有浮動(dòng)元素后加:
<div style="clear:both;height:0px;"></div>
第二種辦法,使用萬(wàn)能clear:

復(fù)制代碼
代碼如下:

.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
* html .clearfix
{
zoom: 1;
}
*:first-child + html .clearfix
{
zoom: 1;
}

然后在你需要自適應(yīng)的元素上加上class=” clearfix”即可。詳細(xì)請(qǐng)參考:

你真的理解clear:both嗎
在開發(fā)中,從美工MM給你Html代碼中,肯定能經(jīng)???rdquo;<div style="clear:both;"></div>”這樣的代碼,但是你真的能明白它是做什么用的嗎?
如:

復(fù)制代碼
代碼如下:

<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="clear:both;"></div>
</div>

你可以將此部分代碼放到一個(gè)HTML頁(yè)面看看效果,然后在去掉”<div style="clear:both;"></div>”看一下效果,就知道這句話的作用了。
如圖:
(1)有clear:both的:

你真的理解clear:both嗎?

2)無(wú)clear:both

你真的理解clear:both嗎?
這樣看,應(yīng)該就一目了然了:原來(lái)后邊的Clear:both;其實(shí)就是利用清除浮動(dòng)來(lái)把外層的div撐開,所以有時(shí)候,我們?cè)趯?nèi)部div都設(shè)置成浮動(dòng)之后,就會(huì)發(fā)現(xiàn),外層div的背景沒有顯示,原因就是外層的div沒有撐開,太小,所以能看到的背景僅限于一條線。

但這種辦法就是最好了的嗎?
我這么說,當(dāng)然答案就不是了??梢圆捎猛ㄟ^Hack實(shí)現(xiàn):

復(fù)制代碼
代碼如下:

<style>
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
* html .clearfix{zoom: 1;}
*:first-child + html .clearfix{zoom: 1;}
</style>
<div class="clearfix" style="border: 2px solid red;">
<div style="float: left; width: 80px; height: 80px; border: 1px solid blue;">
TEST DIV</div>
</div>

看完解決辦法,咱們來(lái)看里邊的原理:
(1)、首先是利用:after這個(gè)偽類來(lái)兼容FF、Chrome等支持標(biāo)準(zhǔn)的瀏覽器。
:after偽類IE不支持,它用來(lái)和content屬性一起使用設(shè)置在對(duì)象后的內(nèi)容,例如:
a:after{content:"(link)";}
這個(gè)CSS將會(huì)讓a標(biāo)簽內(nèi)的文本后邊加上link文本文字。

(2)、利用“* html”這個(gè)只有IE6認(rèn)識(shí)的選擇符,設(shè)置縮放屬性“zoom: 1;”實(shí)現(xiàn)兼容IE6。
(3)、利用“*:first-child + html”這個(gè)只有IE7認(rèn)識(shí)的選擇符,設(shè)置縮放屬性“zoom: 1;”實(shí)現(xiàn)兼容IE7。

相關(guān)文章

  • 前端CSS Grid 布局示例詳解

    CSS Grid 是一種二維布局系統(tǒng),可以同時(shí)控制行和列,相比 Flex(一維布局),更適合用在整體頁(yè)面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋
    2025-04-16
  • CSS Padding 和 Margin 區(qū)別全解析

    CSS 中的 padding 和 margin 是兩個(gè)非?;A(chǔ)且重要的屬性,它們用于控制元素周圍的空白區(qū)域,本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們
    2025-04-07
  • CSS will-change 屬性示例詳解

    will-change 是一個(gè) CSS 屬性,用于告訴瀏覽器某個(gè)元素在未來(lái)可能會(huì)發(fā)生哪些變化,本文給大家介紹CSS will-change 屬性詳解,感興趣的朋友一起看看吧
    2025-04-07
  • CSS去除a標(biāo)簽的下劃線的幾種方法

    本文給大家分享在 CSS 中,去除a標(biāo)簽(超鏈接)的下劃線的幾種方法,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
    2025-04-07
  • 前端高級(jí)CSS用法示例詳解

    在前端開發(fā)中,CSS(層疊樣式表)不僅是用來(lái)控制網(wǎng)頁(yè)的外觀和布局,更是實(shí)現(xiàn)復(fù)雜交互和動(dòng)態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展,CSS的用法也日益豐富和高級(jí),本文將
    2025-04-07
  • css中的 vertical-align與line-height作用詳解

    文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場(chǎng)景、常見問題及解決方案,感興趣的朋友跟隨小編一起看看吧
    2025-03-26
  • 淺析CSS 中z - index屬性的作用及在什么情況下會(huì)失效

    z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性(如relative、absolute、fixed或sticky),本文給大家介紹CSS 中z - index屬性的作用
    2025-03-21
  • CSS @media print 使用詳解

    文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語(yǔ)法、常見使用場(chǎng)景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁(yè)控制、調(diào)整邊距和背景等
    2025-03-18
  • CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)

    本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示,感興趣的朋友一起
    2025-03-10
  • 前端 CSS 動(dòng)態(tài)設(shè)置樣式::class、:style 等技巧(推薦)

    本文介紹了Vue.js中動(dòng)態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法:對(duì)象語(yǔ)法和數(shù)組語(yǔ)法,通過對(duì)象語(yǔ)法,可以根據(jù)條件動(dòng)態(tài)切換類名或樣式;通過數(shù)組語(yǔ)法,可以同時(shí)綁定多個(gè)類名或樣式,此外
    2025-02-26

最新評(píng)論