Home > เริ่มต้นกับ CSS > จัดตำแหน่งด้วย float and clear

จัดตำแหน่งด้วย float and clear

การวางตำแหน่ง layout ของ div แต่ละอัน เรามักจะใช้ property float และ clear เป็นประจำ ทำให้เราวางตำแหน่งได้อิสระมากขึ้น ในกรณี ที่ต้องการให้มีหลาย คอลัมภ์ ใน 1 หน้า
float นั้นจะคล้าย align ที่เราใส่ใน table เมื่อต้องการให้มันอยู่ชิดด้านซ้าย ก็ใส่ float:left ถ้าชิดขวาใส่ float:right

ส่วน clear นั้น clear:left คือ ไม่ยอมให้มีอะไรอยู่ด้านซ้าย , clear:right คือ ไม่ยอมให้มีอะไรอยู่ด้านขวา,ที่มักใช้เป็นประจำคือ clear:both คือ ไม่ยอมให้มีอะไรอยู่ทั้ง 2 ด้าน มักจะใช้กับส่วน footer

จากโค้ด css

<style type=”text/css”>
#col-one{width:300px; height:200px; background:#666666}
.no1{width:100px; height:100px; background:#FFCC00;}
.no2{width:100px; height:100px; background:#99CC00;}
</style>

และ html ดังนี้

<div id=”col-one”>
?????? <div class=”no1″>no1</div>
??????? <div class=”no2″>no2</div>
</div>

จะได้ กล่องเรียงกันลงมา แบบนี้

div

เราจะเพิ่ม float:left; เข้าไปที่ .no1 และ .no2 จะได้เป็น

.no1{width:100px; height:100px; background:#FFCC00; float:left}
.no2{width:100px; height:100px; background:#99CC00; float:left;}

ทำให้ div no1 นั้นชิดซ้าย และ no2 ก็ตามขึ้นมาด้วย

float left

no1- left, no2 – right

.no1{width:100px; height:100px; background:#FFCC00; float:left}
.no2{width:100px; height:100px; background:#99CC00; float:right;}

จะได้

float_left_right

สมมติว่า เรายังไม่รู้ว่าเนื้อหา ใน col-one นั้นจะมีเท่าไร ถ้ามีมาก ส่วนพื้นหลังสีดำ ก็ควรจะยืดลงมามาก ถ้ามีน้อยก็ควรจะหดสั้นลงให้พอดีกับเนื้อหา ตอนนี้เรากำหนดไว้ที่ height:200px; เราจะลบ property นี้ออก จะเป็น

#col-one{width:300px;background:#666666}

จะได้ผลดังนี้

float no clear

จะเห็นว่า Fx จะไม่ทำแบ็คกราวน์ยืดลงมาตามสิ่งที่มีอยู่ข้างใน แต่ IE6 ทำ ส่วน opera netscape ทำเหมือน Fx
วิธีทำ cross browser สำหรับกรณีแบบนี้ คือ ใช้ class clear-all

.clear-all{clear:both; line-height:0; height:0;}

คลาสนี้ ควรจะเป็นคลาสที่มีอยู่ในไฟล์ .css ทุกครั้งที่มีการใช้ float จะต้องมีการ clear เสมอ เราจะใส่ class นี้ ใน tag <br> หรือ div จะได้เป็น html ดังนี้

<div id=”col-one”>
??????? <div class=”no1″>no1</div>
??????? <div class=”no2″>no2</div>
??????? <br class=”clear-all”>
</div>

ถ้าใส่ในรูป div จะได้

<div id=”col-one”>
??????? <div class=”no1″>no1</div>
??????? <div class=”no2″>no2</div>
??????? <div class=”clear-all”></div>
</div>

ก็จะทำให้ ส่วนพื้นหลังสีดำยืดลงมา เหมือนในรูปของ IE6 ถ้าเมื่อไรที่มีวัตถุลอยขึ้นไป ไม่ตรงตำแหน่งที่วางไว้ หรือส่วนแบ็คกราวน์ ไม่ยอมยืดลงมา ก็ให้สังเกตที่ตัว float และ clear อาจมีการ float ไม่ถูกต้อง หรือ อาจมีการ clear ไม่ถูกที่ อย่างใดอย่างหนึ่ง

ภาพตัวอย่างการ layout ด้วย float และ clear
float layout

ตำแหน่งของ html จะเรียงจากบนลงล่างซ้ายไปขวา ดังนี้

<div id=”header”></div>
<div id=”green”></div>
<div id=”yellow”>
??????? <div id=”pink”></div>
????????<div id=”sky”></div>
??????? <br class=”clear-all”>
??????? <div id=”grey”></div>
</div>
<div id=”footer”></div>

ส่วนของ css ที่กำหนดความกว้างสูง และ สี ลองไปเติมกันดูครับ

Related Articles


Share
Categories: เริ่มต้นกับ CSS
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. May 6th, 2007 at 05:56 | #1

    ชอบบทนี้จัง ดูเหมือนว่า CSS ก็ไม่ยากเท่าไหร่แฮะ ไว้จะลองไปเขียนดูนะครับ ;)

  2. oam
    May 6th, 2007 at 12:59 | #2

    เยี่ยมมากครับ ชัดเจน เข้าใจง่าย

  3. XaGa
    May 16th, 2007 at 11:53 | #3

    css for dummiesเลยครับเข้าใจง่ายมาก

  4. Nickky
    May 17th, 2007 at 10:50 | #4

    เข้าใจง่ายมากเลยค่ะ :d เยี่ยมเลย

  5. purin
    May 22nd, 2008 at 12:31 | #5

    ขอบคุณครับ :)>-

  6. July 10th, 2008 at 16:10 | #6

    ขอบคุงมากเลยครับ ผู้ปลดปล่อย:d

  7. Yaya
    September 4th, 2008 at 20:09 | #7

    ต้องการหาโหลดโปรแกรม CSS คะ มีที่ไหนให้โหลดได้บ้าง รบกวนช่วยแนะนำด้วยนะคะ

    ขอบคุณค่า

  8. Beginner
    March 21st, 2009 at 15:18 | #8

    ขอบคุณสำหรับบทความดีๆ ครับ
    เยี่ยมมากเลยครับ :)>-

  9. k9
    April 26th, 2009 at 12:49 | #9

    ขอบคุณสำหรับความรู้ดีๆครับ เมื่อก่อนเขียนใช้แต่ table แต่ตอนนี้จะเปลี่ยนเป็น table less แทน อ่านบทความนี้ แจ่มเลยครับ :d

  10. June 19th, 2009 at 01:31 | #10

    สุดยอดอ่านแล้วเข้าใจเลย

  11. June 23rd, 2009 at 13:22 | #11

    เขียนอ่านได้เข้าใจง่ายดีคับ

  12. jikkajoo
    August 2nd, 2009 at 19:41 | #12

    It’s very useful. I use it every time doing the web.

  13. August 20th, 2009 at 15:28 | #13

    กระจ่างแจ้ง แจ่มแจ๋ว จริงๆ ครับ:)

  14. December 6th, 2009 at 13:52 | #14

    Thank you for good information

  15. December 6th, 2009 at 13:53 | #15

    ความรู้แบบนี้ชอบจริงๆ

  16. April 22nd, 2010 at 03:11 | #16

    ชอบอีกแล้วบทความนี้
    ตามมาอ่านแม้ว่าจะดึกมากแล้ว ง่วงมากๆ แต่อยากได้ “ของดี” ก่อนนอน

    ขอบคุณมากนะครับ
    วิท (http://www.tutorpoint.net)

  17. July 25th, 2010 at 06:52 | #17

    ชัดเจนมากเลย ขอบคุณมากๆ

  18. sitti
    July 28th, 2010 at 16:05 | #18

    สุดยอดมากๆ ครับ ทำเรื่องยากให้เป็นเรื่องง่ายแท้ๆ

  19. simplyboy
    November 22nd, 2010 at 10:07 | #19

    ขอบคุณมากมายครับสำหรับการแบ่งปันความรู้
    อยากรบกวนเรียนถามครับคือผมอยากให้รูปภาพ
    อยู่ทางด้ายซ้ายบน และข้อความอยู่ทางขวาของรูปภาพ พอเลยรูปภาพไปแล้วก้มีข้อความใด้รูปภาพอีก คล้าย ๆ เราพิมพ์เอกสารใน word นะครับ

    พอดีผมลองทำตามแล้วข้อความมันจะไปอยู่ข้างใต้รูปภาพตลอดเลยครับ จัดหน้าไม่ได้
    ขอบพระคุณครับ:d

  20. January 30th, 2011 at 10:03 | #20

    พยายามทำความเข้าใจอยู่ค่ะ ยังไง สำหรับเรามันก็ยังยากอยู่ ^_^ ‘
    ขอนั่งดูก่อนซัก 20 รอบ

  21. February 8th, 2011 at 17:35 | #21

    เข้าใน Float ครับแต่ก็พึ่งใช้ Clear เป็นนี่แหล่ะ ขอบคุณมากครับ

  22. February 27th, 2011 at 19:11 | #22

    แจ่มเลย…หามาตั้งนาน ถ้าทำไม่ได้จะมาถามนะครับ อิอิ

  23. Pharkpoom
    April 16th, 2011 at 11:42 | #23

    ทำให้ CSS ง่ายขึ้น เยอะ ครับ ^^

  24. May 20th, 2011 at 17:42 | #24

    ขอบคุณครับ css เป็นเรื่องง่ายไปเลย

  25. June 15th, 2011 at 01:10 | #25

    เจ๋ง ไม่ต้องสร้างตารางสำหรับจัดวางเลย
    ขอบคุณครับ

  26. อิอิ
    June 15th, 2011 at 21:36 | #26

    ชอบมาก

  27. ppsonic
    July 6th, 2011 at 15:05 | #27

    ขอบคุณครับ ชอบบทความนี้จังครับ

  28. John
    July 16th, 2011 at 13:00 | #28

    เขียนได้ดีมากคับ ขอบคุณคับ:)>-

  29. นัทจัง
    August 22nd, 2011 at 13:46 | #29

    ขอบคุณมากอ่านทีเดียวเข้าใจเลย อ่านมาหลายเว็บล่ะ อันนี้เยี่ยมเลยครับ ขอบคุณที่แชร์ความรู้นะครับ

  30. October 19th, 2011 at 16:24 | #30

    อธิบายได้เยี่ยม แหม…ของเขาดีจิงๆ

  1. February 16th, 2011 at 22:56 | #1