CSS浮動(dòng)布局初步

leong 2012-03-28

展開(kāi)全文

CSS浮動(dòng)布局初步

浮動(dòng)和定位是CSS

布局當(dāng)中很重要的兩種方法，這一篇先講浮動(dòng)布局，定位留在下一篇。

一、先說(shuō)說(shuō)浮動(dòng)的性質(zhì)吧，請(qǐng)看HTML代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<div class=test1> 
 <img alt=picture src="/hope2008/Education/UploadFiles_5303/201008/20100817224945779.jpg" width=100 height=200> 
 <P class=box>在春天的江南鄉(xiāng)間，。。。。。。</P> 
 <span class=inline>在春天的江南鄉(xiāng)間。。。。。。</span><BR> 
 <span style="MARGIN: 30px" class=inline>在春天的江南鄉(xiāng)間。。。。。。</span> 
</div> 
<div class=test2> 
 <P> 
  <span>在春天的江南鄉(xiāng)間。。。。。。</span> 
  <span class="float display">在春天的江南鄉(xiāng)間。。。。。。</span> 
  <span>在春天的江南鄉(xiāng)間，我們看到油菜花開(kāi)。。。。。。</span> 
 </P> 
 <hr> 
 <P> 
  <span>在春天的江南鄉(xiāng)間。。。。。。</span> 
  <span class=float>在春天的江南鄉(xiāng)間。。。。。。</span> 
  <span>在春天的江南鄉(xiāng)間。。。。。。</span> 
 </P> 
</div>

相應(yīng)的CSS代碼：

1

2

3

4

5

6

7

8

9

10

* { margin: 0; padding: 0; } 
body { font: 12px/1.5 Verdana, Tahoma, "宋體", sans-serif; padding: 50px; } 
.test1, .test2 { border: 1px solid #000; margin: 50px auto; overflow: hidden; } 
img { border: 1px solid green; float: left; margin: 50px; padding: 1px; } 
.box { background: #EEE; border: 1px solid green; width: 400px; height: auto; margin: 30px; } 
.inline { background: #EEE; border: 1px solid green; } 
.test2 p { margin: 20px; } 
.float { background: red; color: #FFF; float: left; } 
.display { display: block; } 
h1, ol, strong { color: red; }

部分截圖如下：

總結(jié)得出浮動(dòng)元素的性質(zhì)：

浮動(dòng)元素會(huì)脫離正常的文檔流，按照其外邊距指定的位置相對(duì)于它的上一個(gè)塊級(jí)元素（或父元素）顯示
浮動(dòng)元素后面的塊級(jí)元素的內(nèi)容會(huì)向此浮動(dòng)元素的外邊距靠齊，但是邊框和背景卻忽略浮動(dòng)元素而向上一個(gè)（實(shí)例中為父元素）任意非浮動(dòng)元素靠齊
浮動(dòng)元素后面的內(nèi)聯(lián)元素會(huì)向此浮動(dòng)元素的外邊距靠齊

元素設(shè)置為浮動(dòng)之后，就生成一個(gè)塊級(jí)框（css行高提出的概念），沒(méi)必要再聲明display:block，可以設(shè)置寬高。

請(qǐng)單擊查看Demo

二、接下來(lái)細(xì)說(shuō)浮動(dòng)的幾個(gè)規(guī)則。

1、浮動(dòng)規(guī)則1：

浮動(dòng)元素的左（右）外邊界不超出其包含塊的左（右）內(nèi)邊界

HTML代碼：

1

2

3

4

5

6

7

8

9

10

11

<div class="wrapper"> 
 <div class="main"> 
  <div class="float left"><p>浮動(dòng)元素1<br />浮動(dòng)元素的左外邊界不超出其包含塊的左內(nèi)邊界</p></div> 
  <div class="float right"><p>浮動(dòng)元素2<br />浮動(dòng)元素的右外邊界不超出其包含塊的右內(nèi)邊界</p></div> 
  <div class="noFloat"> 
   <p> 
    非浮動(dòng)元素！... 
   </p> 
  </div> 
 </div> 
</div>

相應(yīng)CSS樣式：

1

2

3

4

5

6

7

8

9

10

* { margin: 0; padding: 0; } 
body { font: 12px/1.5 Tahoma, Verdana, "宋體", sans-serif; padding: 50px; } 
h1, strong { color: red; } 
em { font-style: normal; } 
.wrapper { background-color: #EEE; border: 5px solid #999; margin: 50px auto; padding: 20px; width: 90%; overflow: auto; } 
.main { border: 1px solid #999; padding: 1px; float: left; /* 為了讓包含子浮動(dòng)元素的父元素顯示出來(lái)，可以設(shè)置此父元素浮動(dòng) */} 
.noFloat { border: 1px solid #333; color: gray;} 
.float { background-color: #FFF; border: 1px solid #AAA; width: 200px; height: 200px; } 
.left { float: left; } 
.right { float: right; }

由于圖片較大，不截圖了，請(qǐng)單擊查看Demo

2、浮動(dòng)規(guī)則2：

浮動(dòng)元素的左（右）外邊界必須是源文檔中之前出現(xiàn)的左（或右）浮動(dòng)元素的右（左）外邊界，除非后出現(xiàn)的浮動(dòng)元素的頂端在先出現(xiàn)的浮動(dòng)元素的底端下面

防止浮動(dòng)元素彼此覆蓋，保證所有浮動(dòng)對(duì)象都可見(jiàn)。但是定位卻容易導(dǎo)致元素覆蓋！

同樣請(qǐng)看源碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div class="wrapper"> 
 <div class="main"> 
  <div class="float left"><p>浮動(dòng)元素1<br /></p></div> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！... 
   </p> 
  </div> 
  <div class="float left"><p>浮動(dòng)元素2<br /></p></div> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！...<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
   </p> 
  </div> 
  <div class="float left"><p>浮動(dòng)元素3<br /></p></div> 
 </div> 
</div>

CSS樣式：

1

2

3

4

5

6

7

8

9

10

* { margin: 0; padding: 0; } 
body { font: 12px/1.5 Tahoma, Verdana, "宋體", sans-serif; padding: 50px; } 
h1, strong { color: red; } 
em { font-style: normal; } 
.wrapper { background-color: #EEE; border: 5px solid #999; margin: 0 auto; padding: 20px; width: 90%; overflow: auto; } 
.main { border: 1px solid #999; padding: 1px; float: left;  /* 為了讓包含子浮動(dòng)元素的父元素顯示出來(lái)，可以設(shè)置此父元素浮動(dòng) */} 
.noFloat { border: 1px solid #333; color: gray;} 
.float { background-color: #FFF; border: 1px solid #AAA; width: 200px; height: 200px; } 
.left { float: left; } 
.right { float: right; }

請(qǐng)單擊查看Demo

3、浮動(dòng)規(guī)則3：

左浮動(dòng)元素的右外邊界不會(huì)在其右邊右浮動(dòng)元素的左外邊界的右邊；右浮動(dòng)元素的左外邊界不會(huì)在其左邊任何左浮動(dòng)元素的右邊界的左邊。

防止第二個(gè)浮動(dòng)元素與第一個(gè)浮動(dòng)元素有重疊區(qū)域。

HTML結(jié)構(gòu)：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<div class="wrapper"> 
 <div class="main"> 
  <div class="float left"><p>浮動(dòng)元素1<br /></p></div> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！... 
   </p> 
  </div> 
  <div class="float right"><p>浮動(dòng)元素2<br /></p></div> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！... 
   </p> 
  </div> 
 </div> 
</div>

樣式：

1

2

3

4

5

6

7

8

9

10

11

12

13

* { margin: 0; padding: 0; } 
body { font: 12px/1.5 Tahoma, Verdana, "宋體", sans-serif; padding: 50px; } 
h1, strong { color: red; } 
em { font-style: normal; } 
.wrapper { background-color: #EEE; border: 5px solid #999; margin: 0 auto; padding: 20px; width: 90%; overflow: auto; } 
.main { border: 1px solid #999; padding: 1px; float: left;  /* 為了讓包含子浮動(dòng)元素的父元素顯示出來(lái)，可以設(shè)置此父元素浮動(dòng) */} 
.noFloat { border: 1px solid #333; color: gray;} 
.float { background-color: #FFF; border: 1px solid #AAA; width: 200px; height: 200px; } 
.left { float: left; } 
.right { float: right; } 
/* 樣式改變 */
.wrapper { width: 600px; } 
.float { width: 400px; }

請(qǐng)單擊查看Demo

4、浮動(dòng)規(guī)則4：

一個(gè)浮動(dòng)元素的頂端不能比其父元素的內(nèi)頂端更高。如果一個(gè)浮動(dòng)元素在兩個(gè)合并外邊距之間，放置這個(gè)元素時(shí)就好像在兩個(gè)元素之間有一個(gè)塊級(jí)父元素。

假如有三個(gè)段落，中間段落浮動(dòng)，浮動(dòng)段落會(huì)像有一個(gè)塊級(jí)父元素（如div）一樣浮動(dòng)，能防止浮動(dòng)段落一直向上移動(dòng)到三個(gè)段落共同的父元素頂端

HTML結(jié)構(gòu)：

1

2

3

4

5

6

7

8

9

10

11

12

<div class="wrapper"> 
 <div class="main"> 
  <div class="float left"><p>浮動(dòng)元素1</p></div> 
  <p class="noFloat"> 
   非浮動(dòng)元素！... 
  </p> 
  <p class="float left">浮動(dòng)元素2浮動(dòng)元素2浮動(dòng)元素2浮動(dòng)元素2浮動(dòng)元素2浮動(dòng)元素2浮動(dòng)元素2浮動(dòng)元素2浮動(dòng)元素2浮動(dòng)元素2浮動(dòng)元素2浮動(dòng)元素2浮動(dòng)元素2</p> 
  <p class="noFloat"> 
   非浮動(dòng)元素！... 
  </p> 
 </div> 
</div>

風(fēng)格：

1

2

3

4

5

6

7

8

9

10

11

12

13

* { margin: 0; padding: 0; } 
body { font: 12px/1.5 Tahoma, Verdana, "宋體", sans-serif; padding: 50px; } 
h1, strong { color: red; } 
em { font-style: normal; } 
.wrapper { background-color: #EEE; border: 5px solid #999; margin: 0 auto; padding: 20px; width: 90%; overflow: auto; } 
.main { border: 1px solid #999; padding: 1px; float: left;  /* 為了讓包含子浮動(dòng)元素的父元素顯示出來(lái)，可以設(shè)置此父元素浮動(dòng) */} 
.noFloat { border: 1px solid #333; color: gray;} 
.float { background-color: #FFF; border: 1px solid #AAA; width: 200px; height: 200px; } 
.left { float: left; } 
.right { float: right; } 
/* 樣式改變 */
p.float { width: auto; height: auto; } 
.noFloat { margin: 20px 0; }/* 兩個(gè)非浮動(dòng)段落有上下外邊距，并會(huì)產(chǎn)生合并 */

請(qǐng)單擊查看Demo

5、浮動(dòng)規(guī)則5：

浮動(dòng)元素的頂端不能比之前所有浮動(dòng)元素或塊級(jí)元素的頂端更高。

防止浮動(dòng)元素彼此覆蓋，保證所有浮動(dòng)對(duì)象都可見(jiàn)。但是定位卻容易導(dǎo)致元素覆蓋！

HTML結(jié)構(gòu)：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div class="wrapper"> 
 <div class="main"> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！... 
   </p> 
  </div> 
  <div class="float left"><p>浮動(dòng)元素1</p></div> 
  <div class="float left"><p>浮動(dòng)元素2</p></div> 
  <div class="float right"><p>浮動(dòng)元素3</p></div> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！... 
   </p> 
  </div> 
 </div> 
</div>

風(fēng)格：

1

2

3

4

5

6

7

8

9

10

11

12

* { margin: 0; padding: 0; } 
body { font: 12px/1.5 Tahoma, Verdana, "宋體", sans-serif; padding: 50px; } 
h1, strong { color: red; } 
em { font-style: normal; } 
.wrapper { background-color: #EEE; border: 5px solid #999; margin: 0 auto; padding: 20px; width: 90%; overflow: auto; } 
.main { border: 1px solid #999; padding: 1px; float: left;  /* 為了讓包含子浮動(dòng)元素的父元素顯示出來(lái)，可以設(shè)置此父元素浮動(dòng) */} 
.noFloat { border: 1px solid #333; color: gray;} 
.float { background-color: #FFF; border: 1px solid #AAA; width: 200px; height: 200px; } 
.left { float: left; } 
.right { float: right; } 
/* 樣式改變 */
.noFloat + .float { width: 100%; /* 此處是為了讓第二個(gè)div必須在第一個(gè)div下面，因其本本身是浮動(dòng)元素，使用清除浮動(dòng)無(wú)效 */}

請(qǐng)單擊查看Demo

6、浮動(dòng)規(guī)則6：

如果源文檔中一個(gè)浮動(dòng)元素之前出現(xiàn)另一個(gè)元素，浮動(dòng)元素的頂端不能比包含該元素所生成框的任何行框的頂端更高。

進(jìn)一步限制元素的向上浮動(dòng)

HTML結(jié)構(gòu)：

1

2

3

4

5

6

7

8

9

10

11

12

13

<div class="wrapper"> 
 <div class="main"> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！... 
   </p> 
  </div> 
  <div class="float right"><p>浮動(dòng)元素1</p></div> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！... 
   </p> 
  </div> 
 </div> 
</div>

風(fēng)格：

1

2

3

4

5

6

7

8

9

10

11

12

* { margin: 0; padding: 0; } 
body { font: 12px/1.5 Tahoma, Verdana, "宋體", sans-serif; padding: 50px; } 
h1, strong { color: red; } 
em { font-style: normal; } 
.wrapper { background-color: #EEE; border: 5px solid #999; margin: 0 auto; padding: 20px; width: 90%; overflow: auto; } 
.main { border: 1px solid #999; padding: 1px; float: left;  /* 為了讓包含子浮動(dòng)元素的父元素顯示出來(lái)，可以設(shè)置此父元素浮動(dòng) */} 
.noFloat { border: 1px solid #333; color: gray;} 
.float { background-color: #FFF; border: 1px solid #AAA; width: 200px; height: 200px; } 
.left { float: left; } 
.right { float: right; } 
/* 樣式改變 */
.right { width: 100px ; height: 30px; }

請(qǐng)單擊查看Demo

7、浮動(dòng)規(guī)則7：

左（右）浮動(dòng)元素的左（右）邊有另一個(gè)浮動(dòng)元素，前者的右外邊界不能在其包含塊的右（左）邊界的右（左）邊，即浮動(dòng)元素不能超出其包含元素的邊界，除非它太寬本身無(wú)法放下。

如果沒(méi)有足夠的空間，浮動(dòng)元素會(huì)被"擠"到新行上。

HTML結(jié)構(gòu)：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<div class="wrapper"> 
 <div class="main"> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！... 
   </p> 
  </div> 
  <div class="float left"><p>浮動(dòng)元素1</p></div> 
  <div class="float left"><p>浮動(dòng)元素2</p></div> 
  <div class="float left"><p>浮動(dòng)元素3</p></div> 
  <div class="float left"><p>浮動(dòng)元素4</p></div> 
  <div class="float left"><p>浮動(dòng)元素5</p></div> 
  <div class="float left"><p>浮動(dòng)元素6</p></div> 
  <div class="float left"><p>浮動(dòng)元素7</p></div> 
  <div class="float left"><p>浮動(dòng)元素8</p></div> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！... 
   </p> 
  </div> 
 </div> 
</div>

風(fēng)格：

1

2

3

4

5

6

7

8

9

10

* { margin: 0; padding: 0; } 
body { font: 12px/1.5 Tahoma, Verdana, "宋體", sans-serif; padding: 50px; } 
h1, strong { color: red; } 
em { font-style: normal; } 
.wrapper { background-color: #EEE; border: 5px solid #999; margin: 0 auto; padding: 20px; width: 90%; overflow: auto; } 
.main { border: 1px solid #999; padding: 1px; float: left;  /* 為了讓包含子浮動(dòng)元素的父元素顯示出來(lái)，可以設(shè)置此父元素浮動(dòng) */} 
.noFloat { border: 1px solid #333; color: gray;} 
.float { background-color: #FFF; border: 1px solid #AAA; width: 200px; height: 200px; } 
.left { float: left; } 
.right { float: right; }

請(qǐng)單擊查看Demo

8、浮動(dòng)規(guī)則8：

滿足其他約束條件時(shí)，浮動(dòng)元素必須盡可能高的放置。

浮動(dòng)元素的頂端應(yīng)當(dāng)與其標(biāo)記所在的行框（行高中提出的概念）的頂端對(duì)齊。

HTML結(jié)構(gòu)：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<div class="wrapper"> 
 <div class="main"> 
  <div class="float left"><p>浮動(dòng)元素1</p></div> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！。。。 
   </p> 
  </div> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！。。。 
   </p> 
  </div> 
  <div class="float left"><p>浮動(dòng)元素2</p></div> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！。。。 
   </p> 
  </div> 
 </div> 
</div>

風(fēng)格：

1

2

3

4

5

6

7

8

9

10

11

12

* { margin: 0; padding: 0; } 
body { font: 12px/1.5 Tahoma, Verdana, "宋體", sans-serif; padding: 50px; } 
h1, strong { color: red; } 
em { font-style: normal; } 
.wrapper { background-color: #EEE; border: 5px solid #999; margin: 0 auto; padding: 20px; width: 90%; overflow: auto; } 
.main { border: 1px solid #999; padding: 1px; float: left;  /* 為了讓包含子浮動(dòng)元素的父元素顯示出來(lái)，可以設(shè)置此父元素浮動(dòng) */} 
.noFloat { border: 1px solid #333; color: gray;} 
.float { background-color: #FFF; border: 1px solid #AAA; width: 200px; height: 200px; } 
.left { float: left; } 
.right { float: right; } 
/* 樣式改變 */
.noFloat + .noFloat { clear: both; }

請(qǐng)單擊查看Demo

9、浮動(dòng)規(guī)則9：

浮動(dòng)元素必須盡可能朝著所浮動(dòng)的方向向父元素內(nèi)邊距靠近，且位置越高，靠近的程度越大。

HTML結(jié)構(gòu)：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<div class="wrapper"> 
 <div class="main"> 
  <div class="float left"><p>浮動(dòng)元素1</p></div> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！...<br /><br /><br /><br /><br /><br /><br /><br /> 
   </p> 
  </div> 
  <div class="float left"><p>浮動(dòng)元素2</p></div> 
  <div class="noFloat"> 
   <p>非浮動(dòng)元素！... 
   </p> 
  </div> 
 </div> 
</div>

風(fēng)格：

1

2

3

4

5

6

7

8

9

10

* { margin: 0; padding: 0; } 
body { font: 12px/1.5 Tahoma, Verdana, "宋體", sans-serif; padding: 50px; } 
h1, strong { color: red; } 
em { font-style: normal; } 
.wrapper { background-color: #EEE; border: 5px solid #999; margin: 0 auto; padding: 20px; width: 90%; overflow: auto; } 
.main { border: 1px solid #999; padding: 1px; float: left;  /* 為了讓包含子浮動(dòng)元素的父元素顯示出來(lái)，可以設(shè)置此父元素浮動(dòng) */} 
.noFloat { border: 1px solid #333; color: gray;} 
.float { background-color: #FFF; border: 1px solid #AAA; width: 200px; height: 200px; } 
.left { float: left; } 
.right { float: right; }

請(qǐng)單擊查看Demo

三、下面講講清除浮動(dòng)吧

當(dāng)一個(gè)父的盒子包含浮動(dòng)的子元素時(shí)，為了讓父元素完全顯示（或者說(shuō)高度自適應(yīng)），這時(shí)候我們需要清除浮動(dòng)。下面歸納四種辦法實(shí)現(xiàn)。

HTML結(jié)構(gòu)：

1

2

3

4

5

6

7

<div class="father"> 
 <div class="child1"><p>浮動(dòng)元素</p></div> 
 <div class="child2"><p>浮動(dòng)元素<br /><br /><br /><br /><br /><br /><br /></p></div> 
 <!--[if IE 6]> 
 <div class="clear"></div> 
 <![endif]-->
</div>

風(fēng)格：

1

2

3

4

5

6

7

8

9

10

11

12

13

* { margin: 0; padding: 0; } 
body { font: 12px/1.5 Tahoma, Verdana, "宋體", sans-serif; padding: 50px; } 
.father { background-color: #EEE; width: 900px; margin: 100px auto; } 
.child1, .child2 { border: 1px dashed #555;  float: left; width: 400px; margin: 30px 10px; } 
/* 清除浮動(dòng)的四種方法 */
/* 方法一 */.father { float: left; }/* 此時(shí)父元素高度自適應(yīng)，但是左右外邊距auto失效，父元素靠左對(duì)齊 */
/* 方法二 */.father { float: none; overflow: hidden;/* 高度自適應(yīng)的關(guān)鍵。auto的話ie6會(huì)產(chǎn)生滾動(dòng)條 */ _zoom: 1;/* 兼容IE6 */ }/* 此時(shí)父元素高度自適應(yīng)，且居中對(duì)齊不變 */
/* 方法三 */.father:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }/* 清除浮動(dòng)的一種方法，但ie6不兼容 */
<!--[if IE 6]> 
<style type="text/css"> 
 /* 方法四 */.clear { clear: both; }/* 所有瀏覽器都適用，為了不增加嵌套才用條件注釋兼容ie6 */
</style> 
<![endif]-->

由此總結(jié)出清除浮動(dòng)的辦法：

給父元素設(shè)置浮動(dòng)；
對(duì)父元素使用溢出隱藏的辦法；
對(duì)父元素使用:after偽對(duì)象實(shí)現(xiàn)；
空標(biāo)簽法。

請(qǐng)單擊查看Demo

四、最后再說(shuō)一說(shuō)浮動(dòng)元素與非浮動(dòng)元素混合布局時(shí)，它們的重疊順序：

假設(shè)有如下HTML代碼：

1

2

3

4

5

6

7

8

9

10

11

<div class="test"> 
 <img src="/hope2008/Education/UploadFiles_5303/201008/20100817211746240.jpg" width="311px" height="350px" alt="picture" /> 
 <h2>江南油菜花 美得華實(shí)</h2> 
 <p><strong>在春天的江南鄉(xiāng)間，我們看到油菜花開(kāi)，</strong>...</p> 
 <p><strong>南國(guó)的春天，油菜花將近郊的田地抹上一片金黃一片翠綠，</strong>... 
 </p> 
 <p>...</p> 
 <p>...</p> 
 <p>...</p> 
 <p>...</p> 
</div>

風(fēng)格：

1

2

3

4

5

6

7

8

* { margin: 0; padding: 0; } 
body { font: 12px/1.5 Verdana, Tahoma, "宋體", sans-serif; padding: 50px; } 
.test { border: 1px solid #000; margin: 50px auto; overflow: hidden; } 
h2 { background: #DDD; border: 3px solid #333; } 
img { float: left; margin: 10px -120px 10px 10px; } 
p { text-indent: 2em; } 
p strong { background: red; border: 2px solid #000; color: #FFF; } 
h1, ol { color: red; }

結(jié)論：與浮動(dòng)元素重疊時(shí)的布局：

行內(nèi)框與一個(gè)浮動(dòng)元素重疊時(shí)，其邊框、背景和內(nèi)容都在該浮動(dòng)元素"之上"顯示
塊框與一個(gè)浮動(dòng)元素重疊時(shí)，其邊框和背景在該浮動(dòng)元素"之下"顯示，只有內(nèi)容在浮動(dòng)元素"之上"顯示

請(qǐng)單擊查看Demo

五、浮動(dòng)元素的居中

還有就是關(guān)于浮動(dòng)元素的居中問(wèn)題，這里限于篇幅，不再贅述，請(qǐng)擴(kuò)展閱讀："實(shí)現(xiàn)浮動(dòng)后的li元素居中"以li元素的居中為例講解如何實(shí)現(xiàn)浮動(dòng)元素居中，推薦使用相對(duì)定位法實(shí)現(xiàn)。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

CSS浮動(dòng)布局初步

一、先說(shuō)說(shuō)浮動(dòng)的性質(zhì)吧，請(qǐng)看HTML代碼：

1、浮動(dòng)規(guī)則1：

2、浮動(dòng)規(guī)則2：

3、浮動(dòng)規(guī)則3：

4、浮動(dòng)規(guī)則4：

5、浮動(dòng)規(guī)則5：

6、浮動(dòng)規(guī)則6：

7、浮動(dòng)規(guī)則7：

8、浮動(dòng)規(guī)則8：

9、浮動(dòng)規(guī)則9：

三、下面講講清除浮動(dòng)吧

由此總結(jié)出清除浮動(dòng)的辦法：

四、最后再說(shuō)一說(shuō)浮動(dòng)元素與非浮動(dòng)元素混合布局時(shí)，它們的重疊順序：

結(jié)論：與浮動(dòng)元素重疊時(shí)的布局：

一、先說(shuō)說(shuō)浮動(dòng)的性質(zhì)吧，請(qǐng)看HTML代碼：

4、浮動(dòng)規(guī)則4：

6、浮動(dòng)規(guī)則6：

7、浮動(dòng)規(guī)則7：

8、浮動(dòng)規(guī)則8：

9、浮動(dòng)規(guī)則9：

三、下面講講清除浮動(dòng)吧

四、最后再說(shuō)一說(shuō)浮動(dòng)元素與非浮動(dòng)元素混合布局時(shí)，它們的重疊順序：