浮動(dòng)

CSS允許浮動(dòng)任何元素摆霉。

浮動(dòng)元素

首先懒浮，會(huì)以某種方式將浮動(dòng)元素從文檔的正常流中刪除，不過它還是會(huì)影響布局榄笙。一個(gè)元素浮動(dòng)時(shí)邪狞，其他內(nèi)容會(huì)“環(huán)繞”該元素。
浮動(dòng)元素的外邊距不會(huì)與其他元素的外邊距合并茅撞。

浮動(dòng)的詳細(xì)內(nèi)幕

包含塊帆卓，浮動(dòng)元素的包含塊是其最近的塊級(jí)祖先元素。
浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框米丘，不論元素本身是什么剑令。它會(huì)像塊級(jí)元素一樣擺放和表現(xiàn)。對(duì)浮動(dòng)元素聲明 display: block也不是不可能蠕蚜，不過沒有必要這么做尚洽。
浮動(dòng)元素要遵守的規(guī)則：

• 浮動(dòng)元素的左（或右）外邊界不能超出其包含塊的左（或右）內(nèi)邊界。
• 浮動(dòng)元素的左（或右）外邊界必須是源文檔中之前出現(xiàn)的左浮動(dòng)（或右浮動(dòng)）元素的右（左）外邊界靶累，除非后出現(xiàn)浮動(dòng)元素的頂端在先出現(xiàn)浮動(dòng)元素的底端下面腺毫。這條規(guī)則可以防止浮動(dòng)元素彼此“覆蓋”癣疟。如果一個(gè)元素向左浮動(dòng)，而另一個(gè)元素已經(jīng)在那個(gè)位置潮酒，后放置的元素將挨著前一個(gè)浮動(dòng)元素的右外邊界放置睛挚。不過，如果一個(gè)浮動(dòng)元素的頂端在所有之前浮動(dòng)圖像（元素）的底端下面急黎，它可以一直浮動(dòng)到父元素的左內(nèi)邊界扎狱。
• 左浮動(dòng)元素的右外邊界不會(huì)在其右邊右浮動(dòng)元素的左外邊界的右邊。一個(gè)右浮動(dòng)元素的左外邊界不會(huì)在其左邊任何左浮動(dòng)元素的右外邊界的左邊勃教。 這條規(guī)則可以防止浮動(dòng)元素相互重疊淤击。如果寬度不夠，它會(huì)要求第二個(gè)圖像向下浮動(dòng)故源，直到其頂端在左浮動(dòng)圖像的底端之 下污抬。
• 一個(gè)浮動(dòng)元素的頂端不能比其父元素的內(nèi)頂端更高。
• 如果一個(gè)浮動(dòng)元素在兩個(gè)正常元素塊之間绳军，放置這個(gè)浮動(dòng)元素時(shí)就好像在兩個(gè)元素之間有一個(gè)塊級(jí)父元素印机。這個(gè)浮動(dòng)元素浮動(dòng)在塊級(jí)父元素中。這樣防止浮動(dòng)元素的頂端超過上面那個(gè)元素的底端门驾。
• 浮動(dòng)元素的頂端不能比之前所有浮動(dòng)元素或塊級(jí)元素的頂端更高射赛。
• 如果源文檔中一個(gè)浮動(dòng)元素之前出現(xiàn)另一個(gè)元素，浮動(dòng)元素的頂端不能比包含該元素所生成框的任何行框的頂端更高奶是。這個(gè)規(guī)則進(jìn)一步限制了元素的向上浮動(dòng)楣责，不允許元素浮動(dòng)到包含該浮動(dòng)元素之前內(nèi)容的行的頂端之上。假設(shè)一個(gè)段落的正中間有一個(gè)浮動(dòng)圖像聂沙。這個(gè)圖像頂端最高只能放在該圖像所在行框的頂端腐魂。
• 左（或右）浮動(dòng)元素的左邊（右邊）有另一個(gè)浮動(dòng)元素，前者的右外邊界不能在其包含塊的右（左）邊界的右邊（左邊） 逐纬。也就是說蛔屹，浮動(dòng)元素不能超出其包含元素的邊界，除非它太寬豁生，本身都無(wú)法放下兔毒，這就能防止出現(xiàn)以下情況，即多個(gè)浮動(dòng)元素出現(xiàn)在一個(gè)水平 行上甸箱，遠(yuǎn)遠(yuǎn)超出其包含塊的邊界育叁，相反，如果浮動(dòng)元素出現(xiàn)在另一個(gè)浮動(dòng)元素的旁邊芍殖，而因此可能導(dǎo)致超出包含塊的話豪嗽，實(shí)際上這個(gè)浮動(dòng)元素 會(huì)向下浮動(dòng)到之前浮動(dòng)元素下面的某一點(diǎn)。
• 浮動(dòng)元素必須盡可能高地放置。
• 左浮動(dòng)元素必須向左盡可能遠(yuǎn)龟梦，右浮動(dòng)元素則必須向右盡可能遠(yuǎn)隐锭。位置越高，就會(huì)向右或向左浮動(dòng)得越遠(yuǎn)计贰。

實(shí)用行為

當(dāng)父元素的高度比其中的浮動(dòng)元素小的時(shí)候钦睡，會(huì)發(fā)生什么呢。
下面這個(gè)例子：

<div id="float1">
    不夠高的div里有個(gè)高高的浮動(dòng)元素
    <div></div>
</div>
<h3>這個(gè)標(biāo)題也會(huì)受到?jīng)_出來(lái)的浮動(dòng)div的影響</h3>
#float1{
  background-color: #1f7e9a;
  color:yellowgreen;
  //overflow: hidden;
  //float:left;
  div{
    float:left;
    width:20px;
    height:200px;
    margin-left: 30px;
    background-color: #ac2925;
  }
}
#float1 + h3 {
  background-color: #b06d0f;
  color: #2aabd2;
}

這時(shí)里面的div會(huì)沖出父級(jí)div向下延伸躁倒。下面的元素也會(huì)受到影響荞怒。這里的h3，雖然總長(zhǎng)度還是會(huì)填滿它的父級(jí)div秧秉，但是其中的內(nèi)容卻被向右擠了褐桌。這是由于浮動(dòng)元素同時(shí)存在于流內(nèi)和流外，對(duì)流內(nèi)的元素還是有一定的影響象迎，影響的大原則就是使各個(gè)元素的內(nèi)容不互相覆蓋撩嚼。
這個(gè)情況看起來(lái)特殊其實(shí)很普遍，很多時(shí)候一個(gè)div里全是浮動(dòng)的元素挖帘，那么這個(gè)div的高度其實(shí)是0，也就意味著這個(gè)div下面的元素一定會(huì)受到浮動(dòng)元素的影響恋技。
有兩種方法使不夠高的父元素來(lái)變高包裹住浮動(dòng)的子元素拇舀。就是分別把上面的兩句注釋取消掉。
第一個(gè)會(huì)完美的結(jié)束浮動(dòng)蜻底，div包裹住所有浮動(dòng)的元素骄崩，以后的元素不會(huì)受到影響。
第二個(gè)是一個(gè)規(guī)則薄辅，是CSS2.1澄清的浮動(dòng)元素行為的一個(gè)方面：浮動(dòng)元素會(huì)延伸要拂，從而包含其所有后代浮動(dòng)元素。

負(fù)外邊距
負(fù)外邊距可以讓浮動(dòng)元素顯示在父元素的外面站楚，看起來(lái)違反了上面的規(guī)則脱惰，其實(shí)并沒有。
這里就出現(xiàn)了一個(gè)問題窿春，如果你將元素的上外邊距負(fù)的很大拉一，那就意味著一定會(huì)影響到已經(jīng)顯示完成的元素們。CSS1和2都明確規(guī)定旧乞，這里并不需要重繪已經(jīng)繪制好的元素們蔚润。一般用戶代理的處理方式都是直接將浮動(dòng)的div繪制在之前已經(jīng)顯示了的元素的下面。
浮動(dòng)元素比父元素更寬
在這種情況下尺栖，浮動(dòng)元素會(huì)超出右或左內(nèi)邊界嫡纠，從而盡可能正確地顯示，究競(jìng)是超出右內(nèi)邊界還是左內(nèi)邊界，取決于元素以何種方式浮動(dòng)除盏。
浮動(dòng)元素叉橱，內(nèi)容和重疊
如果一個(gè)浮動(dòng)元素與正常流中的內(nèi)容發(fā)生重疊會(huì)怎樣呢？
例如痴颊，如果一個(gè)浮動(dòng)元素在內(nèi)容流過的邊上有負(fù)外邊距（例如赏迟，右浮動(dòng)元素上的左外邊距為負(fù)）就會(huì)發(fā)生這種情況。
CSS2.1明確了如下規(guī)則：

• 行內(nèi)框與一個(gè)浮動(dòng)元素重疊時(shí)蠢棱，其邊框锌杀、背景和內(nèi)容都在該浮動(dòng)元素“之上”顯示
• 塊框與一個(gè)浮動(dòng)元素重疊時(shí)，其邊框和背景在該浮動(dòng)元素“之下”顯示泻仙，而內(nèi)容在浮動(dòng)元素“之上”顯示
• 重疊與元素出現(xiàn)在文檔中的順序無(wú)關(guān)

以上這些在下面這個(gè)例子里都有體現(xiàn)：

<div id="float1">
    不夠高的div里有個(gè)高高的浮動(dòng)元素
    <div></div>
</div>
<h3>這個(gè)標(biāo)題也會(huì)受到?jīng)_出來(lái)的浮動(dòng)div的影響,塊級(jí)元素與行內(nèi)元素重合時(shí)</h3>
<span>行內(nèi)元素與浮動(dòng)元素重合時(shí)</span>
#float1{
  background-color: #1f7e9a;
  color:yellowgreen;
  //overflow: hidden;
  //float:left;
  div{
    float:left;
    width:150px;
    height:200px;
    margin-left: 30px;
    margin-top:-10px;
    margin-right:-10px;
    background-color: #ac2925;
  }
}
#float1 + h3 {
  background-color: #b06d0f;
  color: #2aabd2;
}
#float1 + h3 + span {
  background-color: #b06d0f;
  color: #2aabd2;
  border: 2px dashed #ac2925;
}

清除

你可能并不總是希望內(nèi)容流過浮動(dòng)元素糕再，某些情況下，可能要特意避免這種行為玉转。
如果你的文檔分組為小節(jié)突想，可能不希望一個(gè)小節(jié)的浮動(dòng)元素浮動(dòng)到另一個(gè)小節(jié)中。在這種情況下究抓，你希望將每小節(jié)的第一個(gè)元素設(shè)置為禁止浮動(dòng)元素出現(xiàn)在它旁邊猾担。如果這個(gè)小節(jié)的第一個(gè)元素可能放在一個(gè)浮動(dòng)元素旁邊，則會(huì)將這個(gè)元素向下推刺下，直到出現(xiàn)在浮動(dòng)元素的下面绑嘹，而且所有后續(xù)內(nèi)容都
在其后面出現(xiàn)。這樣就消除了任何浮動(dòng)元素對(duì)這個(gè)元素的影響橘茉。
在某個(gè)元素上使用clear屬性可以做到這一點(diǎn)工腋，left | right | both | none | inherit。
這個(gè)屬性只能應(yīng)用于塊級(jí)元素畅卓。
在CSS1和CSS2中擅腰，clear工作如下，它會(huì)增加元素的上外邊距翁潘，使之最后落在浮動(dòng)元素的下面趁冈，這實(shí)際上會(huì)忽略為清除元素頂端設(shè)置的外邊距寬度。會(huì)被改成是將元素下移足夠遠(yuǎn)（使內(nèi)容區(qū)在浮動(dòng)元素下邊界的下面）所需的任何長(zhǎng)度拜马。
在CSS2.1中箱歧，引入了一個(gè)清除區(qū)域。清除區(qū)域是在元素上外邊距之上增加的額外間隔一膨，不允許任何浮動(dòng)元素進(jìn)入這個(gè)范圍內(nèi)呀邢。這意味著元素設(shè)置clear屬性時(shí)，它的外邊距并不改變豹绪。之所以會(huì)向下移是這個(gè)清除區(qū)域造成的价淌。
這里會(huì)有兩種情況申眼，一種是你的上外邊距本身就很大，已經(jīng)讓你的元素在浮動(dòng)元素之下了蝉衣，那你的元素是不會(huì)受到浮動(dòng)元素的影響的括尸，clear這時(shí)無(wú)關(guān)緊要。
另一種是你的上外邊距并不夠大病毡，那clear就會(huì)增加這個(gè)額外的區(qū)域濒翻，直到你的元素剛好不被浮動(dòng)元素影響，這時(shí)你的元素剛好在浮動(dòng)元素的下面啦膜，你的上外邊距其實(shí)起不到什么作用有送。
你要是希望你的元素清除浮動(dòng)后能確定的與浮動(dòng)元素至少有多少距離，就在浮動(dòng)元素的下面加下外邊距吧僧家，這樣浮動(dòng)框大小本身就增加了雀摘，clear會(huì)把這點(diǎn)考慮進(jìn)去。

定位

定位的類型

通過position屬性可以選擇4種不同類型的定位八拱，這會(huì)影響元素框生成的方式阵赠。
static | relative | absolute | fixed | inherit
默認(rèn)值為static〖〉荆可應(yīng)用于所有元素清蚀。
static
元素框正常生成：塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分爹谭，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框枷邪，置于其父元素中。
relative
元素框可以偏移某個(gè)距離旦棉。元素仍保持其未定位前的形狀，它原本所占的空間仍保留药薯。
absolute
元素框從文檔流完全刪除绑洛，并相對(duì)于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊童本，后面另說真屯。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來(lái)不存在一樣穷娱。元素定位后生成一個(gè)塊級(jí)框绑蔫，而不論原來(lái)它在正常流中生成何種類型的框。
fixed
元素框的表現(xiàn)類似于將position設(shè)置為absolute泵额，不過其包含塊是視窗本身配深。

包含塊

還記得之前浮動(dòng)元素的包含塊嘛，對(duì)于浮動(dòng)元素嫁盲，其包含塊定義為最近的塊級(jí)祖先元素篓叶。
定位的情況稍微復(fù)雜些：

• “根元素”的包含塊（也稱為初始包含塊）由用戶代理建立，在HTML中，根元素就是html元素缸托，不過有些瀏覽器會(huì)使用body作為根元素左敌。在大多數(shù)瀏覽器中，初始包含塊是一個(gè)視窗大小的矩形俐镐。
• 對(duì)于一個(gè)非根元素矫限，如果其position值是relative或static，包含塊則由最近的塊級(jí)框佩抹、表單元格或行內(nèi)塊祖先框的內(nèi)容邊界構(gòu)成叼风。
• 對(duì)于一個(gè)非根元素，如果其position值是absolute匹摇，包含塊設(shè)置為最近的position值不是static的祖先元素(可以是任何類型)咬扇。這個(gè)過程如下：
  如果這個(gè)祖先是塊級(jí)元素，包含塊則設(shè)置為該元素的內(nèi)邊距邊界廊勃，換句話說懈贺，就是由邊框界定的區(qū)域。 如果這個(gè)祖先是行內(nèi)元素坡垫，包含塊則設(shè)置為該祖先元素的內(nèi)容邊界梭灿。 如果沒有符合條件的祖先，元素的包含塊定義為初始包含塊冰悠。

偏移屬性

偏移屬性來(lái)描述定位元素的外邊距邊界相對(duì)于其包含塊的偏移堡妒。
top、right溉卓、bottom皮迟、left
可能的值有：（length）| （percentage） | auto | inherit
除了position為static的元素不能使用，其他的都會(huì)有效果桑寨。
其中百分?jǐn)?shù)值是相對(duì)于包含塊的高度或?qū)挾葋?lái)說的伏尼。
它們可以是負(fù)值，會(huì)把元素定位在內(nèi)容框外尉尾。

寬度和高度

盡管有時(shí)設(shè)置一個(gè)元素的寬度和高度很重要爆阶，但對(duì)于定位元素來(lái)說則不一定必要。如果使用top沙咏、right辨图、bottom和left來(lái)描述元素4個(gè)邊的放置位置，那么元素的高度和寬度將由這些偏移隱含確定肢藐。
可以限制寬度和高度故河，使用min-width、min-height吆豹、max-width忧勿、max-height杉女。這兩個(gè)屬性可應(yīng)用于除了非替換行內(nèi)元素和表元素以外的所有元素。

絕對(duì)定位

這里介紹絕對(duì)定位的一些細(xì)節(jié)鸳吸。

包含塊和絕對(duì)定位元素

元素絕對(duì)定位時(shí)熏挎，會(huì)從文檔流中完全刪除。然后相對(duì)于其包含塊定位晌砾，其邊界根據(jù)偏移屬性（top坎拐、left等）放置，定位元素不會(huì)流入其他元素的內(nèi)容养匈，反之亦然哼勇。這說明，絕對(duì)定位元素可能覆蓋其他元素呕乎，或者被其他元素覆蓋积担。

絕對(duì)定位元素的放置和大小

如果一個(gè)元素使用4個(gè)偏移屬性來(lái)定位會(huì)發(fā)生什么 情況？瀏覽器會(huì)根據(jù)包含塊的大小和定位元素的偏移量來(lái)自動(dòng)計(jì)算元素的寬高猬仁。但是這樣做之后帝璧，再試圖設(shè)置一個(gè)顯式的高度和寬度會(huì)怎么樣呢？
這些值可能是沖突的湿刽，那就意味著至少一個(gè)值會(huì)被忽略的烁。right和bottom會(huì)被首先忽略，一般這就夠了诈闺。
自動(dòng)邊偏移
在將某個(gè)（除bottom）任意的偏移量設(shè)置為auto時(shí)渴庆，定位元素會(huì)相對(duì)于其未定位前本來(lái)的位置放置，也就是元素在正常流中原本的位置（假設(shè)元素“position”屬性為“static”時(shí)元素的位置）雅镊。
不過要注意的是襟雷，這時(shí)元素已經(jīng)被從文檔流中刪掉了，雖然它會(huì)被定位到原來(lái)的位置仁烹，但是會(huì)影響后面元素的布局耸弄。
非替換元素的放置和大小
考慮一個(gè)定位元素的寬度和水平放置。這可以表示為一個(gè)等式： left+margin-left+border-left-width+padding-left+width+padding-right+border-right- width+margin-right+right=包含塊的width晃危。
在設(shè)置的規(guī)則不夠強(qiáng)的時(shí)候叙赚，會(huì)根據(jù)一些規(guī)則計(jì)算剩下的值老客。

• 如果left僚饭、width和right都設(shè)置為auto：左邊界會(huì)置于其靜態(tài)位置。元素的width設(shè)置為“收放得正好合適”胧砰，這說明該元素的內(nèi)容區(qū)寬度恰好只能包含其內(nèi)容而沒有多余空間鳍鸵。
• 左右外邊距都設(shè)置為auto，而left尉间、width和right不是auto：左右外邊距會(huì)設(shè)置為相等的值偿乖。
• 如果只有一個(gè)值為auto則會(huì)自動(dòng)計(jì)算這個(gè)值
• 如果規(guī)則相互沖突击罪，重設(shè)right

例子：

<div style="position: relative; width: 25em; border: 1px dotted;">
    An absolutely positioned element can have its content
    <span style="position: absolute; top: 0; left: 0; right: auto; width:auto; background: silver;">
        shrink-wrapped
    </span>
    thanks to the way positioning rules work.
</div>
<div style="position: relative; width: 25em; border: 1px dotted;">
    An absolutely positioned element can have its content
    <span style="position: absolute; top: 0; left: 3em; right: 1em; width: 10em; margin: 0 auto; background: silver;">
        shrinkwrapped
    </span>
    thanks to the way positioning rules work.
</div>
<div style="position: relative; width: 25em; border: 1px dotted;">
    An absolutely positioned element can have its content
    <span style="position: absolute; top: 0; left: 1em; right: 1em; width: 10em; margin-left: 1em; margin-right: 1em; background: silver;">
        shrink-wrapped
    </span>
    thanks Co the way positioning rules work.
</div>

垂直情況下情況大致相同，這里有個(gè)不錯(cuò)的特點(diǎn)贪薪，就是外邊距的auto可以用來(lái)垂直居中了媳禁。不過這種方法只針對(duì)height固定的元素有效。

<div id="position-absu-vertical">
   <div>This is paragraph text</div>
</div>
#position-absu-vertical{
  height:200px;
  position: relative;
  background-color: #000;
  div{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto auto;
    height: 50px;
    width:50px;
    background-color: #fff;
  }
}

替換元素的放置和大小
替換元素固有高度和寬度画切，除非創(chuàng)作人員顯式的修改竣稽，否則大小不會(huì)改變。
在高度或?qū)挾任唇o定或?yàn)閍uto時(shí)霍弹，就會(huì)自動(dòng)使用使用替換元素本該有的寬高毫别。
其他的規(guī)則基本和非替換元素一樣的。

固定定位

固定定位與絕對(duì)定位很類似典格，只不過固定元素的包含塊是視窗岛宦。固定定位時(shí)，元素會(huì)完全從文檔流中去除耍缴，不會(huì)有相對(duì)于文檔中任何部分的位置砾肺。

相對(duì)定位

如果相對(duì)定位一個(gè)元素，它會(huì)立即為其所有子元素建立一個(gè)新的包含塊私恬。這個(gè)包含塊對(duì)應(yīng)于該元素原本所在的位置债沮。設(shè)置的偏移量也是針對(duì)原本的位置的相對(duì)偏移量。當(dāng)元素相對(duì)定位時(shí)本鸣，它會(huì)從其正常位置移走疫衩，不過，原來(lái)所占的空間并不會(huì)因此消失荣德。
如果相對(duì)元素的偏移量因?yàn)檫^度受限而發(fā)生沖突闷煤，則會(huì)將一個(gè)值會(huì)重置為另一個(gè)值的相反數(shù)。bottom總是等于-top涮瞻，right總是等于-left鲤拿。

Z軸上的放置

對(duì)于所有定位，最后都不免遇到這樣一種情況：兩個(gè)元素試圖放在同一個(gè)位置上署咽。顯然近顷，其中一個(gè)必須蓋住另一個(gè)。不過宁否，如何控制哪個(gè)元素放在“上層”呢窒升？這就引人了屬性z-index。
有較高z-index值的元素比z-index值較低的元素離讀者更近慕匠。這會(huì)導(dǎo)致有較高z-index值的元素覆蓋其他元素饱须。
所有整數(shù)都可以用作為z-index的值，包括負(fù)數(shù)台谊。如果為元素指定一個(gè)負(fù)z-index值蓉媳，會(huì)將其移到到離讀者更遠(yuǎn)的位置譬挚。也就是說會(huì)移到疊放棧的更低層。
—旦為一個(gè)元素指定了z-index值酪呻，該元素就會(huì)建立自己的局部疊放上下文减宣。這意味著，元素的所有后代相對(duì)于該祖先元素都有其自己的疊放順序玩荠。這非常類似于元素建立新包含塊的方式蚪腋。比如一個(gè)z-index為7的元素的z-index為－1的子元素和一個(gè)z-index為6的元素的z-index為10的子元素重疊了。那么是z-index為－1的在上面姨蟋。
還有一個(gè)規(guī)則屉凯，要求元素絕對(duì)不會(huì)迭放在其疊放上下文的背景之下。如果一個(gè)元素的子元素z-index為負(fù)眼溶，則會(huì)被這個(gè)元素的內(nèi)容覆蓋悠砚，不被背景覆蓋。

元素可見性

visibility：visible | hidden | collapse | inherit
hidden時(shí)堂飞，這個(gè)元素只是不可見了灌旧，還是會(huì)占用原來(lái)它在文檔中的位置。這是與display的顯著區(qū)別绰筛。
collapse在表中顯示用到的枢泰，用于非表元素時(shí)collapse與hidden含義相同。

內(nèi)容溢出

如果一個(gè)元素的內(nèi)容對(duì)于元素大小來(lái)說過大铝噩，就有可能溢出元素本身衡蚂。對(duì)于這種情況，有一些候選解決辦法骏庸，CSS2允許你從中選擇毛甲。
當(dāng)一個(gè)元素被固定為某種特定大小，但是元素中的內(nèi)容過大具被，就可以使用overflow來(lái)控制這種情況玻募。
overflow有這么幾個(gè)值：visible | hidden | scroll | auto | inherit
可以應(yīng)用于塊級(jí)元素和替換元素。默認(rèn)為visible一姿。

• visible表明七咧，元素的內(nèi)容在元素框之外也可見。一般地叮叹，這會(huì)導(dǎo)致內(nèi)容超出其自己的元素框艾栋，但不會(huì)改變框的形狀。
• 設(shè)置為scroll衬横，元素的內(nèi)容會(huì)在元素框的邊界處剪裁裹粤，溢出的部分將無(wú)法直接看到终蒂，Web瀏覽器將使用一個(gè)滾動(dòng)條（或類似的東西）或者使用另外某種方法呈現(xiàn)剩下的內(nèi)容而不會(huì)改變?cè)乇旧淼男螤罘淞帧Ｒ⒁獾氖且Ｋ撸绻麨g覽器采用的是滾動(dòng)條的實(shí)現(xiàn)方式，那么即使元素的大小足夠顯示其內(nèi)容噪叙，也會(huì)出現(xiàn)不可點(diǎn)的滾動(dòng)條矮锈，這是為了防止動(dòng)態(tài)環(huán)境中滾動(dòng)條出現(xiàn)消失而可能帶來(lái)的布局問題。
• 設(shè)置為hidden睁蕾，元素的內(nèi)容會(huì)在元素框的邊界處剪裁苞笨，不過不會(huì)提供滾動(dòng)接口使用戶訪問超出剪裁區(qū)域的內(nèi)容。