css layout กับการใช้ overflow และ float

สวัสดีครับวันนี้ผมไม่ได้มาทำสงครามนะครับ วันนี้โผล่มาแจก Tips แทน จากที่ได้มีคนถามผมบ่อย ๆ ว่าทำไมพอเรา design layout ที่มันจะต้องมีการ float สองข้างก็คือ ซ้าย และ ขวาพอ test browsing ใน browser แล้วทำไมมันแสดงผลไม่หมดล่ะบ้างก็หายไปครึ่งนึง บ้างก็มาแบบบรรทัดเดียว อะไรประมาณนั้น

จากที่ได้เคยลองถามไถ่พรดู ก็ได้รู้ว่าสาเหตุนี้มันไม่ได้เกิดที่เราเขียนอะไรผิดครับแต่มันเป็น bugs ของเจ้า CSS นั่นเอง ซึ่งวิธีแก้นั้น เท่าที่ทุกคนทราบวิธีพื้นฐานเลยก็คือเราต้องสร้าง style ขึ้นมาอีกหนึ่งตัวเพื่อเอาไว้เคลียร์โดยเฉพาะเลย ซึ่งทำกันเช่นนี้

#container {
width: 100px;
margin: 0 auto;
border: 1px solid black;
}
.left {
width: 45px;
float: left;
}
.right {
width: 50px;
float: right;
}
.clear {
clear: both;
}

จะเห็นว่าเมื่อเรามีการสั่ง float เสร็จทั้งสองอย่างแล้วเราต้องมี element อีกหนึ่งตัวเรียก class ที่ชื่อว่า clear มาเพื่อเคลียร์ float ของเจ้า #container ที่มันเกิด bug ให้มันหายไปให้มันยืดตาม content ที่มีอยู่ใน left และ right แต่เคยรู้หรือไม่ว่าเราสามารถแก้ปัญหานี้ได้โดยกำหนดคุณลักษณะบางอย่างให้เจ้าตัวที่เป็นcontainer ได้เลยซึ่งก็คือ overflow: auto; นั่นเอง วิธีนี้ถูกโพสขึ้นครั้งแรกโดย Alex Walker โดยเจ้าตัวเองก็เครดิตให้กับ Paul O’Brien วิธีแก้ปัญหาทำดังนี้

		#container {
		width: 100px;
		margin: 0 auto;
		border: 1px solid black;
		overflow: auto;
		}

จะเห็นว่าเราเพิ่ม overflow: auto; เข้าไป ลองนำ test ดูครับเจ้า container จะยืดตาม content ของ left กับ right โดยอัตโนมัติโดยที่ไม่ต้องใช้ element อีกตัวเรียก .clear เข้ามาล้าง float ที่ค้างอยู่ แต่วิธีนี้อาจจจะมีปัญหาแตกต่างกันในบาง Browser เช่น บางเบราเซอร์ต้องมีการกำหนดค่าอย่างใดอย่างหนึ่งนะครับระหว่าง width หรือ height หรือจำเป็นต้องกำหนดทั้งสองอย่างนะครับ ในกรณีนี้มีบางครั้งที่ความสูง หรือ ความกว้างมันเกินกว่าที่เรากำหนดแล้วมันทำให้เกิด scrollbar ขึ้นโดยอัตโนมัติ หรือเจ้า scrollbar นี่จะแสดงตัวขึ้นมาเองเลยใน IE5 (Mac) วิธีแก้ปัญหาก็คือ

• กำหนดความกว้างซะ
• ต้องแน่ใจว่าเจ้าตัวที่คุณต้องการ float นั่นน่ะ ไม่มีการ overlap กับเจ้าที่เป็น container
• เปลี่ยน overflow: auto; เป็น overflow: hidden; ซะเลย

วิธีที่ชัวร์ก็ต้องเขียนออกมาแบบนี้ล่ะครับ

#container {
		width: 100px;
		margin: 0 auto;
		border: 1px solid black;
		overflow: hidden;
		}

หวังว่าคงเป็นประโยชน์ และ ง่ายต่อการนำไปประยุกต์ใช้ครับ

เจอกันใหม่ครับ radiz