แนวทาง ในการแก้ไขปัญหา Float Model

การจัดวาง layout เพื่อใส่ content ในเวปนั้น เราสามารถใช้ได้ทั้ง การกำหนด position หรือการใช้ float ซึ่งทั้งสองมีรูปแบบการใช้ที่แตกต่างกัน โดยในที่นี้เราจะพูดถึงการใช้ Float กับการจัดวาง Layout โดยสิ่งที่จะเจออย่างแรกคือ ปัญหาการใช้ float กับ block element ซึ่งอยู่ใน block element ที่เป็น  container แล้วตัว container ไม่ยืดตามเนื้อหาของ  block element ที่ใช้ float

ดังตัวอย่าง: css ที่ใช้คือ

.container {
border: #ff7d00 5px solid; background-color: #cccccc;
}
	.float {
	    float: left; 
	    width: 170px; 
	    background-color: #ffffcc;
	    border: #006690 5px solid; 
	}

xhtml

	<div class="container">
	  <div class="float">
	    <p>Block element นี้ได้มีการ Float left ไว้ซึ่งอยู่ใน Block element Container</p>
	  </div>
	  <p>Content นี้อยู่ใน Block element Container </p>
	</div>

ผลที่ได้จะเห็นว่าตัวกล่องหลักจะไม่ยืดไปคลุมกล่องเล็กที่เราได้ Float ไว้ในช่วงแรกก็ได้มีการแก้ไขปัญหานี้ โดยการใช้  clear โดยจะเพิ่ม element ขึ้นมาใส่ไว้ต่อจาก content ที่อยู่ใน container โดยใช้ {clear:both;} ดังนี้

	<div class="container">
	  <div class="float">
	    <p>Block element นี้ได้มีการ Float left ไว้ซึ่งอยู่ใน Block element Container</p>
	  </div>
	  <p>Content นี้อยู่ใน Block element Container </p>
	  <div style="clear:both"></div>
	</div>

หรือใน IE  สามารถแก้โดยใช้อีกวิธี โดยตามปกติใน IE นั้น Block element container จะยืดตามเนื้อหา ก็ต่อเมื่อมีการกำหนดขอบเขตของ ตัวBlock element container ใน css ก็จะสามารถแก้ได้  เช่น {height:1%;}

ซึ่งการแก้ปัญหาโดยวิธี clear นั้นเป็นวิธีที่ไม่ถูกหลักเท่าไร เพราะเป็นการเพิ่ม element ลงใน markup ของ html โดยตรง ซึ่งมันผิดหลักของการเขียนตาม Standard ที่ดี และ ยังต้องตามไปใส่ท้ายเรื่อย ๆ เมื่อมีการเรียกใช้ในลักษณะนี้ตลอด รวมทั้งต้องไปแก้บัคของ IE6 อีก เช่น IE/Win Guillotine Bug (อธิบายต่อด้านล่าง) หรือ IE6 Peekaboo Bug เลยเป็นปัญหาว่าเราจะทำอย่างไร ที่จะ clear โดยที่ไม่ต้องไปยุ่งกับ markup ของ html เลย จึงเกิดวิธีนี้ขึ้นมาให้เพื่อน ๆ พิจารณากันอีก

การใช้ :after

ใน css2 นั้นเราสามารถ ใส่content พิเศษโดยใช้ cssได้ โดยที่ไม่ต้องไปยุ่งกับ markup ของ html การใช้ โดยเราจะใช้ :after กับ element ที่ต้องการใช้ ใส่จุด (.) โดยใช้ content {clear:both;} ใส่ {height:0;} เพื่อไม่ให้เกิดช่องว่างด้านล่างของ elementที่เรา กับ element ทีใช้ float และใส่ {visibility: hidden;}เพื่อไม่ให้จุด(.)ที่เราใส่แสดง ส่วนการใช้ {display:block;} นั้นเพื่อเปลี่ยน :after element เพราะว่า default หลักของมันเป็น” inline” และทำให้ไม่สามารถใช้ clear ได้ ดังนั้นจึงต้องเปลี่ยนให้เป็น block

จึงต้องเพิ่ม css ดังนี้

	.containe:after {
	    content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;

	}

ในส่วนของ ie ยังไม่ทำงานกับ pseudo-elements ซึ่งเป็น css2 ได้ จึงต้องใช้การกำหนดค่า {height : 1%;} ไว้ที่ตัว  elementsที่เป็น container ดังที่ได้เคยอธิบายไว้ด้านบนแล้ว

	/* Hides from IE */
	* html .clearfix {height: 1%;}
	/* End hide from IE */

แต่ยังมีปัญหาอีกอย่างหนึ่งกับ ie6 คือ IE/Win Guillotine Bug กิโยตินบัค จะตัดในส่วนของเนื้อหา ด้านล่างภายใน elements ที่ใช้ float โดยมันจะตัดส่วนด้านล่างให้มากสุดเท่ากับ elementหลัก โดยจะเกิดเมื่อ มีการใส่ linkขณะ hover

ปัจจัยที่ทำให้เกิดนั้น

• มี(container) div ใหญ่อยู่1อัน
• float อยู่ในหลักที่ไม่ clear
• link ไม่ได้float และอยู่ต่อจาก float
• link tag a:hover style  มีการเปลี่ยน properties

เมื่อเกิดปัญหานี้เราจิงต้องใส่ {height:1%;} ลงใน content ที่non-floated  ใน elementsที่เป็น container เพื่อให้ bugนี้หายไป

	/* Hides from IE */
	* html p  {height: 1%;}
	/* End hide from IE */

ซึ่งวิธี ต่างๆที่บอกมานั้น ตอนนี้ใน Browser อื่นที่ไม่ใช่ IE แก้ได้โดยใส่ {overflow:hidden;} แค่บรรทัดเดียว ซึ่งจากที่อธิบายมานั้นแสดงให้เห็นว่าปัญหาต่าง ๆ  ที่เกิดมานั้นไม่ได้เกิดจาก CSS แต่เกิดมากจาก การพัฒนาของแต่ละ Browser ที่แตกต่างกัน และการเลือกใช้วิธีแก้ปัญหาในแต่ละ case ก็อาจจะต้องใช้แตกต่างกันไป หรือ ร่วมกัน หรือ ตามความเหมาะสม ซึ่งถ้าเราเจอปัญหากับการใช้ Float แล้วไม่ใช้มัน เราก็จะไม่พบปัญหา หรือข้อผิดพลาดของปัญหา ถ้าเราใช้เราก็จะรู้ว่าปัญหาที่เกิดขึ้นมานั้นมาจากส่วนไหน เราก็จะสามารถควบคุม หรือพัฒนาวิธีการเขียน CSS ต่อไปได้นั่นเอง