Clear (fix) ทำไม และ ทำไมต้อง clearfix

ผมมี 2 คำถาม ที่ดูเหมือนกวนบาทาเป็นอย่างมาก แต่คำตอบนั้น แตกต่างกันโดยสิ้นเชิงและไม่ได้แสดงอาการกวนช่วงล่างของขาแต่อย่างใด

อาการ ไม่ไหวจะเคลียร์ เกิดขึ้นเมื่อ เลย์เอ้าท์ ที่อยู่ติดกันสองอัน กระโดดไป”ซ้นดากกัน” หรือภาษากลางเรียก ไปซ้อนกัน ทำให้หน้าเว็บเละ และพัง ดูแล้วเหมือนใส่น้ำปลาเยอะไป สาเหตุเกิดมาจากการใช้ Float property ของ CSS นั่นเอง

คำถามมีอยู่ว่า ทำไม เมื่อใช้ float แล้ว มันต้องเป็นอย่างนั้นด้วย เคยสงสัยถามกันบ้างใหม หรือว่า เห็นเขาพากันทำมาอย่างนั้น มันจึงต้องเคลียร์ ไม่รู้เลยว่าเคลียร์ มันมายังไง แค่เคลียร์แล้วมันหายก็จบ เสร็จแล้วก็คิดไม่พบ พอเจอปัญหาก็ clear:both; (บางคนออกเสียง เคลียโบ้ท แปลเป็นไทยถึกๆ ว่า “สละเรือ” หึหึ)

หรือว่าเคลียร์เพราะ”ฝรั่งพาทำ” ว้าว มันเป็นคำตอบที่ยอดมาก โอเค เดี๋ยวบักเสี่ยว”พร อันทะ” จะอธิบายให้ฟังแบบคร่าวๆ ว่าทำไมมันต้องเคลียร์

หนึ่ง Clear fix ทำไม?

คำตอบง่ายๆ ธรรมดา เพราะ layout มันมีปัญหา จึงต้องเคลียร์ อย่างที่ผมบอกมาข้างต้น ว่าถ้าใช้ float แล้วมันจะเน่า เอาให้เห็นภาพ มาดูตัวอย่างกัน

ตัวอย่าง อาการซ้อนกันของ Layout

จากตัวอย่าง section ที่สอง หรือ section:last-child จะขึ้นไปซ้อน section แรก เหตุการณ์จะเป็นอย่างนี้เสมอ ทุกครั้ง ที่เรานำ float มาจัดการกับ layout วิธีแก้ไข มีหลายทาง เริ่มจากใช้ Element เปล่า ทำการเคลียร์ เช่น กำหนด css ขึ้นมา หนึ่งคลาส แล้วสั่ง clear:both; หรือ ขจัดสิ่งขอรอบข้าง โดยเอา element นั้นไปวางไว้ก่อนปิด section ตัวแรก

.clear  {
clear:  both;
}


<section>
 <article>
 <h1>ส่วนของ  Article</h1>
 </article>

 <aside>
 <h1>ส่วนของ  Aside</h1>
 </aside>
<p  class="clear">&nbsp;</p>
</section>

<section>
 <p>ทดสอบการเขียน  clear content</p>
</section>

ผลที่ได้ก็คือ หน้าเว็บเราจะกลับมาแสดงผลอย่างถูกต้องเหมือนเดิม แต่ การเพิ่ม element เปล่าเข้ามาในเอกสาร ขัดกับหลักการของ web accessibility เมื่อเอาไปตรวจจับ อาจจะขึ้นตัวแดงๆ ไม่ผ่านมาตรฐาน จึงเกิดวิธีการที่ 2 ตามมา คือ

การใช้คำสั่ง css create content แล้วค่อยเคลียร์ โดยสั่งงานใน element ที่เป็นปัญหา ในตัวอย่าง ปัญหาเกิดที่ section ของ body การแก้ไข สามารถเขียนได้เป็น

ตัวอย่าง เมื่อแก้ไขแล้ว Layout จะดูดีขึ้น

body>header:first-child+section:after  {
 content:  " ";
 display:  block;
 clear:  both;
}

ตามคำสั่ง CSS ด้านบนคือ :after หรือ หลังจากแสดงผล section เสร็จแล้ว ก่อนปิด ให้กระทำการ สร้าง content (content:””;) ในที่นี้ ผมเขียนค่เปล่าออกมา ทุกๆ เนื้อหาที่ถูกสร้างออกมา จะเปรียบเสมือน phrasing content หรือ มีพฤติกรรมเป็น inline element ต้องสั่งการให้มันแสดงเป็น block ด้วนคำสั่ง display: block; หลังจากนั้นค่อนสั่ง clear ซึ่งลักษณะอย่างนี้ ในการจินตนาการ ก็ไม่ได้ต่างอะไรจากการนำ element ใดๆ มาใส่ค่าเปล่าแล้วสั่งการด้วยคลาส เคลียร์ (.clear) ที่เขียนไว้ก่อน

สิ่งที่ดีกว่าการเคลียร์แบบแรกก็คือ โค้ดสะอาดกว่า

เพราะฉะนั้น จากคำถามแรกว่า”Clear fix ทำไม?” คำตอบคือ เคลียร์เพื่อให้ Layout แสดงผลได้ถูกต้อง กวนไหมครับ

มาถึงข้อที่สอง ถามว่า ทำไมต้อง clear?

อย่าครับ อย่าเพิ่งด่าผม ผมไม่ตอบว่า เพราะ layout มันเน่าแน่นอน คำตอบมันกวนกว่านั้น

ย้อนกลับไปที่งานวิจัยและพัฒนาของ W3C เรื่องของ CSS กับการใช้งาน float ต้องกลับไปนึกดีๆ อ่านกันจริงๆ จังๆ ว่า float มีไว้เพื่ออะไร แน่นอน คำตอบนั้น แทบไม่มีบรรทัดไหนเลยที่เขียนบอกว่า float เอาไว้จัดการวาง layout!!! เพราะ float มีไว้เพื่อจัดการ”ของ” ที่อยู่ใน layout นั่นต่างหาก เช่น รูปภาพที่อยู่ในเนื้อหา จะให้มันอยู่ด้านซ้าย หรือขวา แค่นั้น

การที่พอติด float ให้กับ layout แล้วมันลอยก็เพราะเหตุฉะนั้น float มันก็บอกอยู่แล้วว่า”ลอย” หรือ มีตัวตนเฉพาะพื้นที่ ที่ตัวมันเองต้องใช้ ไม่ต้องเผื่อแผ่อาณาเขตรอบข้างให้คนอื่น layout เลย”ซ้นดากกัน” อย่างที่เห็น

แล้วมีวิธีอื่นใหม ที่ไม่ต้อง float คำตอบคือ มีครับ แต่ มันยังใช้ไม่ได้ อันนี้สิ กวนยิ่งกว่า เพราะมันเป็น CSS3 Advanced Layout Module ที่หลายปีผ่านมาแล้วยังไม่ประกาศใช้ W3C มองข้ามช๊อตเกินไป Vender ที่ให้บริการด้าน Browser ไม่สนใจเท่าที่ควร หรืออะไรก็ตามแต่ทำให้มันช้า พอไม่ประกาศใช้ กรรมก็เลยมาตกอยู่ที่ float

แล้วถ้าประกาศใช้ กรรมจะไปตกอยู่ที่ใคร

มันจะไปตกอยู่ที่ CSS Designer ไงครับ ที่ต้องมารื้อสมองกันใหม่ เพราะ คำสั่งที่ใช้จัดการ Layout มันคือ position และ display ผมจะยกตัวอย่างโดยอาศัยจาก HTML โครงสร้างเดิม แต่การเขียน CSS จะเปลี่ยนเป็น

ผมเริ่มเขียนจาก body เลยนะครับ

 body  {
 display:  ".h."
 ".c."
 ".s."
 *  960px *;
 background:  #fff;
}
header  {
 position:  h;
}
body>header:first-child+section  {
 position:  c;
 display:  ".ab."

 *  660px  300px *;
}
article  {
 position:  a;
}
aside  {
 position:  b;
 background:  #CCC;
}
section:last-child  {
 position:  s;
 background:  #00F;
}

ตัวอย่าง เมื่อ CSS3 Advanced Layout มาถึง

position และ display จะกลายมาเป็นตัวกำหนด Layout ทั้งหมดแทน

พอถามว่า ทำไมเราต้องเคลียร์?

ผมก็เลยตอบว่า เพราะ W3C ไม่รีบเคลียร์ เราก็เลยต้องใช้ float แล้วก็เคลียร์กันเองไปก่อน ด้วยประการฉะนี้