เพื่อแสดงให้เห็นถึงความสำคัญของคุณสมบัติ float ในตัวอย่างนี้นี่คือภาพหน้าจอของภาพเดียวกันหลังจากใช้ firebug เพื่อลบ float: left:

แกลเลอรีภาพถ่ายตามตาราง

การใช้คุณสมบัติ float อย่างง่าย ๆ คือการลอย: ปล่อยชุดภาพถ่ายที่มีอยู่ในรายการที่ไม่เรียงลำดับซึ่งจะได้ผลลัพธ์เช่นเดียวกับสิ่งที่คุณอาจเห็นในเค้าโครงตาราง

หน้าผลิตภัณฑ์ของ Foremost Canada (ดูภาพด้านบน) แสดงผลิตภัณฑ์ในรูปแบบกริดถัดจากแถบด้านข้าง ภาพถ่ายจะแสดงเป็นรายการที่ไม่เรียงลำดับพร้อมคุณสมบัติลอยสำหรับทุกคน

หน้าฟูกของ Paragon Furniture (ดูภาพด้านบน) มีอีกตัวอย่างหนึ่งของหน้าผลิตภัณฑ์โดยใช้รายการที่ไม่เรียงลำดับพร้อมแท็กลอย

หน้าผลการค้นหาของ iStockphoto (ดูภาพด้านบน) ยังมีตารางของรูปถ่ายที่มีโครงสร้างซึ่งรูปถ่ายจะมี float: left

การจัดตำแหน่ง ฟิลด์ที่มีปุ่ม

การสร้างแบบจำลองเริ่มต้นขององค์ประกอบฟอร์มสำหรับ เบราว์เซอร์ที่แตกต่างกัน อาจเป็นปัญหาได้ บ่อยครั้งในช่องฟอร์มเดียวเช่นฟอร์มการค้นหาคุณต้องใส่ รายการถัดจากปุ่มส่ง

คุณสมบัติ Float เป็นทรัพย์สินที่ทรงพลังและมีประสิทธิภาพสำหรับนักพัฒนาเว็บ HTML และ CSS ในทางกลับกันอาจเป็นเรื่องที่น่าหงุดหงิดและสับสนหากคุณไม่เข้าใจวิธีการทำงานอย่างเต็มที่

แปลบทความ CSS ลอย 101... alistapart.com ต้นฉบับ

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

เราเห็นการลอยตัวทุกวันในโลกสิ่งพิมพ์เมื่อเราดูบทความในนิตยสารที่มีรูปภาพทางซ้ายหรือขวาและมีข้อความอยู่รอบ ๆ ในโลก HTML / CSS ข้อความจะล้อมรอบรูปภาพโดยขึ้นอยู่กับคุณสมบัติลอยที่ใช้กับรูปภาพนั้น การใช้คุณสมบัติ float บนรูปภาพเป็นเพียงตัวอย่างหนึ่งของหลาย ๆ ตัวอย่างเช่นด้วยคุณสมบัติ float เราสามารถสร้างเค้าโครงสองคอลัมน์ยอดนิยมได้ง่ายมาก ในความเป็นจริงคุณสามารถลอยองค์ประกอบใดก็ได้ใน HTML ของคุณ ด้วยการเรียนรู้และทำความเข้าใจการใช้คุณสมบัติโฟลตพร้อมกับคุณสมบัติตำแหน่งคุณจะรู้สึกสบายใจและมั่นใจในการสร้างเลย์เอาต์ใด ๆ

คำจำกัดความของโฟลต

เริ่มต้นด้วยการกำหนดว่าคืออะไร ลอย.

Float เป็นกล่องที่เลื่อนไปทางขวาหรือซ้ายตามแนวปัจจุบัน มากที่สุด ลักษณะที่น่าสนใจ float คือเนื้อหาสามารถไหลไปด้านข้างได้ เมื่อใช้คุณสมบัติ float: left เนื้อหาจะล้อมรอบกล่องลงมาจากด้านขวาและในทำนองเดียวกันกับ float: right, ลงจากด้านซ้าย

คุณสมบัติ float มี 4 ค่าที่เราสามารถนำไปใช้ได้: left, right, inheritint และ none แต่ละความหมายค่อนข้างอธิบายตัวเองได้ ตัวอย่างเช่นถ้าคุณลอย: ซ้ายไปยังองค์ประกอบองค์ประกอบนั้นจะลอยไปที่เส้นขอบด้านซ้ายสุดของพาเรนต์ และถ้าคุณตั้งค่า float: right องค์ประกอบก็จะย้ายไปทางขวาเช่นเดียวกัน ค่า ihnerit บอกให้องค์ประกอบสืบทอดคุณสมบัติจากพาเรนต์ และค่าสุดท้ายไม่มีเป็นค่าเริ่มต้นและบอกว่าอย่าใช้คุณสมบัติ ลอย ไปยังรายการนี้

#container (width: 960px; margin: 0 auto;) #content (float: left; width: 660px; background: #fff;) #navigation (float: right; width: 300px; background: #eee;) #footer ( ชัดเจน: ทั้งสอง; พื้นหลัง: #aaa; padding: 10px;)

#footer ของเราติดอยู่ใต้ # บล็อกการนำทาง สิ่งนี้เกิดขึ้นเนื่องจากมีที่สำหรับ #footer ใต้บล็อก #navigation และนี่คือพฤติกรรมที่ถูกต้องสำหรับโฟลว์ปกติของเลย์เอาต์บล็อก แต่นี่ไม่ใช่สิ่งที่เราต้องการอย่างแน่นอนใช่หรือไม่? ฉันคิดว่าคุณเห็นความสัมพันธ์ระหว่าง float และชัดเจนแล้วและเข้าใจว่าพวกเขาเสริมกันอย่างไร

หากคุณมีอาการหมกมุ่นเหมือนฉันคุณอาจสังเกตเห็นในตัวอย่าง F ความสูงที่แตกต่างกันของคอลัมน์ # เนื้อหาและ # การนำทาง มีวิธีแก้ไขหลายวิธี แต่อยู่นอกเหนือขอบเขตของบทความนี้ ฉันขอแนะนำให้อ่าน Faux Columns โดย Dan Cederholm เพื่อเรียนรู้วิธีสร้างบล็อกให้มีความสูงเท่ากันโดยไม่คำนึงถึงเนื้อหาภายใน

ลอยก่อน

จนถึงตอนนี้เราได้เห็นตัวอย่างง่ายๆที่ไม่สร้างความปวดหัวให้มากนัก อย่างไรก็ตามมีข้อผิดพลาดบางประการที่ควรพิจารณาเมื่อใช้คุณสมบัติโฟลต น่าแปลกที่หนึ่งในข้อผิดพลาดที่ใหญ่ที่สุดไม่ใช่ CSS แต่เป็น HTML การวางองค์ประกอบที่ลอยอยู่ภายใน HTML สามารถให้ผลลัพธ์ที่แตกต่างกันได้ ดูตัวอย่าง H.

ที่นี่เรามีบล็อกเล็ก ๆ ที่มีลอย: ภาพด้านขวาพร้อมข้อความล้อมรอบ CSS ของเรามีลักษณะดังนี้:

#container (width: 280px; margin: 0 auto; padding: 10px; background: #aaa; border: 1px solid # 999;) img (float: right;)

#container พาเรนต์ของเรามีความกว้างแคบและทำให้องค์ประกอบลอย (ภาพ) ของเราอยู่ภายในขอบ โค้ด HTML ของเรามีลักษณะดังนี้:

ตัวอย่างนี้ทำให้เราได้ผลลัพธ์ที่ต้องการ แต่ถ้าเราใช้และจัดเรียงองค์ประกอบบางอย่างใน HTML ใหม่ล่ะ? ในตัวอย่าง I ฉันย้าย หลังข้อความ

นี่คือข้อความบางส่วนที่อยู่ในกล่องขนาดเล็ก ฉันใช้เป็นตัวอย่างว่าการวางองค์ประกอบที่ลอยในลำดับต่างๆใน HTML อาจส่งผลต่อเลย์เอาต์ของคุณได้อย่างไรตัวอย่างเช่นดูตัวยึดรูปภาพที่ยอดเยี่ยมนี้ซึ่งควรนั่งอยู่ทางขวา

ผลลัพธ์ของเราไม่เป็นไปตามที่เราคาดหวัง ภาพของเราย้ายไปทางขวา แต่ไม่ได้อยู่ที่มุมบนตามที่เราต้องการอีกต่อไป แต่ตกลงมาด้านล่างย่อหน้า ที่แย่กว่านั้นคือมันยื่นออกมาจากด้านล่างของ #container parent ของเรา เกิดอะไรขึ้น?

ในตอนแรก. กฎทั่วไปของฉันที่ฉันพบสำหรับตัวเองคือลอยองค์ประกอบก่อน ใน HTML ของฉันฉันมักจะเพิ่มองค์ประกอบลอยที่จุดเริ่มต้นของมาร์กอัปของฉันและข้างหน้าองค์ประกอบที่ไม่ลอยที่ฉันโปรดปรานซึ่งองค์ประกอบที่ลอยจะโต้ตอบด้วยเช่นย่อหน้าในตัวอย่างด้านบน ในกรณีส่วนใหญ่จะให้ผลลัพธ์ในเชิงบวก

ประการที่สอง. สาเหตุที่ภาพดูเหมือนจะยื่นออกมาที่ด้านล่างของบล็อก #container ของเรานั้นเกี่ยวข้องกับสิ่งที่เรียกว่าการยุบ ลองพูดคุยเกี่ยวกับการยุบและตัวเลือกการแก้ปัญหา

การยุบ

การยุบคือเมื่อองค์ประกอบที่มีองค์ประกอบลอยจำนวนเท่าใดก็ได้จะไม่ขยายขอบเขตรอบองค์ประกอบที่ซ้อนกันเนื่องจากองค์ประกอบที่ซ้อนกันจะไม่ลอย

ตอนนี้เรามาลองแก้ไขด้วย โดยใช้ CSS แทนที่จะเพิ่มมาร์กอัป HTML เพิ่มเติมในเอกสารของเราเหมือนที่เคยทำมาก่อน มีวิธีการที่อนุญาตให้พาเรนต์ "ใช้" คุณสมบัติที่ชัดเจนหลังจากองค์ประกอบที่ลอยทั้งหมด ในการดำเนินการนี้ให้ใช้คุณสมบัติ CSS มากเกินไปโดยมีค่าที่ซ่อนอยู่ โปรดทราบว่าคุณสมบัติล้นไม่ได้มีไว้สำหรับการใช้งานนี้และอาจทำให้เกิดปัญหาบางอย่างเช่นการซ่อนเนื้อหาหรือลักษณะของแถบเลื่อนที่ไม่ต้องการ อย่างไรก็ตามสำหรับตัวอย่างของเราเราจะยังคงใช้คุณสมบัติ overflow: hidden กับ # คอนเทนเนอร์หลักของเรา:

#container (overflow: hidden; width: 260px; margin: 0 auto; padding: 10px 0 10px 10px; background: #aaa; border: 1px solid # 999;)

และในที่สุดก็, Eric Meyer อธิบายวิธีแก้ไขปัญหาที่สามในบทความของเขาที่มีลอย ตาม CSS Spec 2.1:

องค์ประกอบที่มีคุณสมบัติลอยจะขยายขอบเขตขององค์ประกอบที่ลอยอยู่ภายใน

ดังนั้นด้วยการใช้คุณสมบัติ float กับ #container คอนเทนเนอร์ของเราจะมีรูปภาพและย่อหน้าของเราคล้ายกับวิธีการที่อธิบายไว้ข้างต้น

ท้ายที่สุดแล้วการตัดสินใจทั้งหมดนี้ก็เหมือนกัน ทำให้องค์ประกอบหลักนับองค์ประกอบลอยในสตรีม แต่ละวิธีมีข้อดีและประโยชน์ของตัวเอง คุณต้องเข้าใจแต่ละข้อแล้วใช้สิ่งที่เหมาะกับสถานการณ์ของคุณมากที่สุด

สรุป

ด้วยการใช้คุณสมบัติลอยคุณสามารถปรับปรุงเทคนิคการจัดวางของคุณได้อย่างมาก การทำความเข้าใจว่าคุณสมบัตินี้ทำงานอย่างไรและสิ่งที่ส่งผลต่อพฤติกรรมของมันจะทำให้คุณมีรากฐานที่มั่นคงในการใช้โฟลตอย่างมีประสิทธิภาพ

ในการออกแบบเว็บไซต์ที่ทันสมัยคุณสมบัติ ลอย ใช้ในเกือบทุกขั้นตอน แต่ถึงแม้จะมีความชุกนี้ แต่ทุกคนไม่เข้าใจกลไกการทำงานของบล็อกลอยตัวพฤติกรรมของพวกเขาและผลที่ตามมาจากการใช้งาน

โฟลตคืออะไร?

ลอย นี่คือคุณสมบัติการวางตำแหน่ง CSS เพื่อให้เข้าใจถึงสาระสำคัญและที่มาคุณต้องหันมาสนใจการออกแบบสิ่งพิมพ์ ในเค้าโครงที่พิมพ์ออกมาคุณสามารถวางตำแหน่งรูปภาพเพื่อให้ข้อความไหลไปรอบ ๆ โดยปกติจะเรียกว่า " ตัดข้อความ".

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

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

การตั้งค่าคุณสมบัติ ลอย สำหรับองค์ประกอบที่ใช้ CSS มีลักษณะดังนี้:

#sidebar (ลอย: ขวา;)

มีสี่ค่าที่ถูกต้องสำหรับคุณสมบัติ ลอย - ซ้าย, ขวา, ไม่มี, สืบทอด... สองคนแรก ซ้าย และ ขวา ระบุทิศทางของตำแหน่ง - ซ้ายและขวาตามลำดับ ไม่มี - ค่าเริ่มต้นบ่งชี้ว่าองค์ประกอบไม่ลอยและ สืบทอด สั่งให้องค์ประกอบสืบทอดค่าคุณสมบัติ ลอย จากองค์ประกอบหลัก

ลูกลอยใช้ทำอะไร?

นอกจากตัวอย่างง่ายๆของการตัดข้อความรอบ ๆ รูปภาพแล้ว ลอย สามารถใช้เพื่อสร้างเค้าโครงเว็บ

ลอยนอกจากนี้ยังมีประโยชน์สำหรับองค์ประกอบเค้าโครงขนาดเล็ก ตัวอย่างเช่นใช้ตัวอย่างข้อมูลขนาดเล็กของหน้าเว็บ ถ้าเราตั้งค่าคุณสมบัติ ลอย สำหรับภาพอวาตาร์ขนาดเล็กจากนั้นเมื่อขนาดภาพเปลี่ยนไปการตัดจะเปลี่ยนไปตามขนาดภาพใหม่:

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

รีเซ็ตการห่อ

ชัดเจน ทรัพย์สินที่เกี่ยวข้องกับทรัพย์สิน ลอย... องค์ประกอบที่มีคุณสมบัติชุด ชัดเจน จะไม่เลื่อนขึ้นไปรอบ ๆ องค์ประกอบที่มีคุณสมบัติชุด ลอยแต่จะลอยลงโดยไม่สนใจการไหล และอีกครั้งเป็นภาพประกอบที่จะอธิบายทุกอย่างโดยไม่ต้องกังวลใจอีกต่อไป

ในตัวอย่างด้านบนแถบด้านข้างลอยอยู่ทางขวาของบล็อกเนื้อหาหลัก ส่วนท้ายได้ย้ายไปยังจุดว่างใต้แถบด้านข้างโดยล้อมรอบบล็อกเนื้อหาหลัก ในการแก้ไขปัญหานี้คุณต้องระบุค่าสำหรับ clear: คุณสมบัติทั้งสองของ "ส่วนท้าย" เพื่อ "ล้าง" โฟลว์รอบคอลัมน์ทั้งสอง

#footer (ชัดเจน: ทั้งคู่;)

ทรัพย์สิน ชัดเจน มีสี่ความหมาย ทั้งสอง ใช้เพื่อรีเซ็ตการห่อในทั้งสองทิศทาง ซ้าย และ ขวา ใช้เพื่อรีเซ็ตทิศทางเดียว - ซ้ายหรือขวาตามลำดับ ไม่มี เป็นค่าเริ่มต้น สืบทอด อาจเป็นค่าที่ห้า แต่ไม่ได้รับการสนับสนุนอย่างน่าประหลาดใจ Internet Explorer... การรีเซ็ตเฉพาะโฟลว์ซ้ายหรือขวานั้นค่อนข้างหายาก แต่ก็มีประโยชน์ในทางปฏิบัติ

การล่มสลายที่ยิ่งใหญ่

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

แต่ทางเลือกอื่นในการล่มสลายนั้นเลวร้ายยิ่งกว่า พิจารณาสถานการณ์ต่อไปนี้:

หากบล็อกด้านบนขยายโดยอัตโนมัติเพื่อรองรับองค์ประกอบที่ลอยอยู่เราจะหยุดการไหลของข้อความระหว่างย่อหน้าโดยไม่มีความเป็นไปได้ที่จะกำจัดมันออกไป หากเป็นกรณีนี้นักพัฒนาซอฟต์แวร์จะบ่นเกี่ยวกับพฤติกรรมของบล็อกลอยตัวบ่อยกว่าการล่มสลายในตอนนี้

ควรจดจำการยุบเพื่อป้องกันพฤติกรรมการจัดวางที่แปลกประหลาดและปัญหาข้ามเบราว์เซอร์ เราสามารถแก้ปัญหานี้ได้โดยใช้ ชัดเจน หลังจากองค์ประกอบลอยในภาชนะ แต่ก่อนที่ภาชนะจะปิด

ตัดเทคนิคการยกเลิก

หากคุณอยู่ในสถานการณ์ที่คุณรู้ว่าองค์ประกอบต่อไปจะอยู่ที่ใดคุณสามารถใช้ clear: ทั้งสองอย่างและดำเนินการเกี่ยวกับธุรกิจของคุณ เหมาะอย่างยิ่งเนื่องจากไม่ต้องใช้การแฮ็กหรือองค์ประกอบเพิ่มเติม แต่น่าเสียดายที่โดยปกติแล้วทุกอย่างไม่เป็นไปตามที่เราต้องการและในกรณีนี้คุณสามารถใช้เครื่องมือต่อไปนี้ได้

วิธีการบล็อกที่ว่างเปล่า

มันเป็นบล็อกที่ว่างเปล่าอย่างแท้จริง

วิธีการล้น

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

วิธีทำความสะอาดง่าย.

ใช้ CSS pseudo-selector (: after) เพื่อลบการตัด แทนที่จะใช้ทรัพย์สิน ล้น สำหรับองค์ประกอบหลักให้ตั้งค่าคลาสเพิ่มเติมเช่น "clearfix" และใช้สไตล์ CSS ต่อไปนี้:

Clearfix: after (เนื้อหา: "."; Visibility: hidden; display: block; height: 0; clear: both;)

สิ่งนี้ใช้เนื้อหาชิ้นเล็ก ๆ ซ่อนจากมุมมองซึ่งอยู่หลังองค์ประกอบหลักซึ่งจะลบการตัดออก วิธีนี้ยังไม่สมบูรณ์เนื่องจากต้องมีราคาแพงเพื่อรองรับเบราว์เซอร์รุ่นเก่า

สถานการณ์ที่แตกต่างกันต้องใช้วิธีการต่างๆในการรีเซ็ตลูกลอย ยกตัวอย่างเช่นตารางของบล็อกประเภทต่างๆ

เพื่อการรวมภาพที่ดีขึ้นของบล็อกที่คล้ายกันเราต้องเริ่มบรรทัดใหม่เมื่อสีเปลี่ยนไป เราสามารถใช้วิธี overflow หรือ light clear ถ้าแต่ละกลุ่มสีมีพาเรนต์ หรือใช้วิธีบล็อกว่างระหว่างกลุ่ม สามบล็อกหลักที่ไม่เคยมีมาก่อนหรือสามบล็อกว่างที่ไม่มีอยู่ก่อน ขึ้นอยู่กับคุณที่จะตัดสินใจว่าวิธีใดดีที่สุด

ปัญหาเกี่ยวกับองค์ประกอบลอย

องค์ประกอบที่ลอยอยู่มักถูกวิพากษ์วิจารณ์ถึงความเปราะบาง ความเปราะบางส่วนใหญ่มาจาก IE6 และ ข้อบกพร่องที่มุ่งเน้นการลอย... แต่เนื่องจากนักพัฒนาจำนวนมากขึ้นเรื่อย ๆ ลดการสนับสนุนสำหรับ IE6 คุณอาจไม่ได้คิดถึงเรื่องนี้ แต่สำหรับผู้ที่กังวลเกี่ยวกับความเข้ากันได้นี่คือรายการสั้น ๆ

กดเป็นอาการที่องค์ประกอบภายในกล่องลอยมีความกว้างกว่ากล่องนี้ (โดยปกติจะเกิดขึ้นกับรูปภาพ) เบราว์เซอร์ส่วนใหญ่จะแสดงส่วนที่ยื่นออกมาขององค์ประกอบที่ลอยอยู่ แต่จะไม่ส่งผลต่อการออกแบบ IE จะขยายกล่องลอยและมักจะมีผลกระทบอย่างมากกับเค้าโครง ตัวอย่างทั่วไปคือรูปภาพที่ยื่นออกมาจากบล็อกเนื้อหาหลักโดยดันแถบด้านข้างลง

ตัดสินใจเร็ว ปัญหา: ใช้ overflow: hidden; เพื่อตัดส่วนเกินออก

บั๊กขอบคู่ เป็นอีกสิ่งหนึ่งที่ควรคำนึงถึงเมื่อทำงานกับ IE6 ข้อผิดพลาดนี้แสดงในความจริงที่ว่าหากฟิลด์อยู่ในด้านเดียวกับที่มันถูกเน้น ลอยฟิลด์จะเพิ่มขึ้นเป็นสองเท่า ตัวอย่างเช่น:

เราได้ระยะขอบซ้ายเข้ามา 40 พิกเซล., แทน 20 พิกเซล.

การแก้ปัญหาอย่างรวดเร็ว: set display: อินไลน์สำหรับบล็อกลอยและไม่ต้องกังวลว่าองค์ประกอบจะยังคงเป็นแบบบล็อก

3 Pixel Jog (3px Jog)... สาระสำคัญของจุดบกพร่องนี้คือข้อความที่อยู่ถัดจากองค์ประกอบที่ลอยอยู่นั้นถูกแทนที่ด้วยพิกเซลสามพิกเซลอย่างแปลกประหลาดราวกับว่าอยู่ภายใต้อิทธิพลของสนามพลังที่อยู่รอบองค์ประกอบที่ลอยอยู่ การแก้ปัญหาอย่างรวดเร็ว: กำหนดความกว้างและความสูงของข้อความที่ได้รับผลกระทบ

IE7 ปรากฏขึ้น จุดบกพร่องของขอบล่างเมื่อพาเรนต์ลอยอยู่และพาเรนต์ลอยด้วย ขอบล่างของเด็กจะถูกละเว้นโดยองค์ประกอบของบรรพบุรุษ การแก้ปัญหาอย่างรวดเร็ว: ใช้ padding-bottom กับ parent แทนที่จะใช้ margin-bottom ของเด็ก

องค์ประกอบทั้งหมดที่ปรากฏในหน้า HTML ไม่มีอะไรมากไปกว่ารูปสี่เหลี่ยม และโดยทั่วไปมีเพียงสองประเภท:

1. บล็อก (blok) ซึ่งใช้ความกว้างทั้งหมดที่พวกเขาอยู่และแยกออกจากสิ่งที่อยู่ด้านบนและด้านล่าง ตัวอย่างเช่นแท็ก DIV, P, H
2. ในตัว (อินไลน์) ตัวอย่างเช่น SPAN, STRONG, EM, A และ IMG

ตาราง.

บทบาทของคุณสมบัติเพิ่มขึ้นหลังจากเปลี่ยนจากเค้าโครงตารางเป็นรูปแบบ Div เนื่องจาก float ช่วยให้นักพัฒนาเว็บสามารถรวมคอลัมน์ได้โดยไม่ต้องใช้ตาราง สามารถรับค่า ขวา, ซ้าย, แต่ไม่ ศูนย์.

การใช้คุณสมบัติการแสดงผล: บล็อก; หรือแสดง: อินไลน์; เราจะแปลงรูปสี่เหลี่ยมผืนผ้าประเภทหนึ่งเป็นอีกประเภทหนึ่ง ตัวอย่างเช่นรายการ UL ที่มี LI จำนวนหนึ่งสามารถจัดเรียงในแนวนอน:

• PARAGRAPH
• PARAGRAPH
• PARAGRAPH

• PARAGRAPH
• PARAGRAPH
• PARAGRAPH

เมื่อใช้คุณสมบัติ float สี่เหลี่ยมผืนผ้าจะปิดกั้น แต่มีคุณสมบัติพิเศษคือความกว้างจะไม่กระจายไปทั่วเนื้อหาทั้งหมด ตัวอย่างเช่นส่วนหัว h3 มีลักษณะดังนี้:

นี่คือ HEADER h3

นี่คือ HEADER h3

นี่คือ HEADER h3

นี่คือ HEADER h3

ข้อความด้านบนยังคงไม่เปลี่ยนแปลงเนื่องจากไม่สามารถวางองค์ประกอบที่ลอยอยู่เหนือเส้นที่สร้างขึ้นได้

นี่คือ HEADER h3

แต่ข้อความสีแดงจะอยู่ใต้หัวข้อและจะล้อมรอบโดยไม่ต้องใส่สไตล์เพิ่มเติม และมีเพียงความสูง h3 เท่านั้นที่จะเอาชนะได้หน้าจะกลับสู่ลำดับตามธรรมชาติ

A B C D องค์ประกอบที่ลอยอยู่จำนวนมากจะเป็นไปตามลำดับของตำแหน่ง

กขในงข้อความ ...

A B C D ถ้าเราเดินเพื่อให้การไหลรอบองค์ประกอบสิ้นสุดลงด้วย ช่วงเวลาหนึ่ง (จากที่นี่), ใช้คุณสมบัติที่ชัดเจน เราสามารถเพิ่มลงในแท็กว่างได้

ในการวางสี่เหลี่ยมบล็อกหลาย ๆ อันให้เท่ากันให้มีความกว้างเท่ากัน

เค้าโครงตารางสะดวกและเข้าใจง่ายซึ่งอาจเป็นสาเหตุที่ทำให้การแสดงผลแบบอะนาล็อก: ตารางปรากฏขึ้น ได้รับรูปร่างเดียวกันโดยมีรหัสน้อยกว่า

ตอนนี้คุณสามารถดูวิธีสร้างแกลเลอรีรูปภาพได้ หวังว่าจะไม่มีใครลืม

ข้อความ ...

ข้อความ ...

คำอธิบาย

คุณสมบัติ float CSS ช่วยให้องค์ประกอบลอยได้โดยหักล้างไปทางซ้ายหรือขวาขององค์ประกอบหลักแล้วแต่ว่าจะตั้งค่าใด หากไม่ได้กำหนดความกว้างไว้อย่างชัดเจนสำหรับองค์ประกอบที่ลอยความกว้างนั้นจะลดความกว้างเพื่อให้พอดีกับเนื้อหา

เบราว์เซอร์ประมวลผลโค้ด HTML ของเอกสารโดยเลื่อนจากบนลงล่างเมื่อการประมวลผลโค้ดมาถึงองค์ประกอบแบบลอยเบราว์เซอร์จะวางโค้ดก่อนตามขั้นตอนของเอกสารนั่นคือ ด้านล่างองค์ประกอบที่อยู่ในรหัสเอกสารจากนั้นจะลบองค์ประกอบลอยออกจากโฟลว์ปกติและชดเชยให้ชิดขอบซ้ายหรือขวาขององค์ประกอบหลักมากที่สุด:

เนื่องจากองค์ประกอบลอยถูกลบออกจากโฟลว์เอกสารองค์ประกอบบล็อกที่เหลือที่อยู่ในโค้ดหลังจากถูกเลื่อนเข้าที่ราวกับว่าองค์ประกอบนี้ไม่มีอยู่

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

แทนที่จะเป็นบล็อกลอยที่มีเนื้อหาข้อความคุณสามารถสร้างรูปภาพลอยได้ ในกรณีนี้ข้อความจะไหลไปรอบ ๆ รูปภาพ:

ใช้คุณสมบัติลอย CSS รูปภาพจะลอยอยู่ทางด้านซ้าย ข้อความที่อยู่ในโค้ด HTML ด้านล่างรูปภาพจะไหลไปรอบ ๆ รูปภาพทางด้านขวาและด้านล่าง

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

องค์ประกอบลอยตัวไม่มีผลต่อความสูงของพาเรนต์นั่นคือหากมีคอนเทนเนอร์บางส่วนและมีองค์ประกอบลอยอยู่เท่านั้นความสูงของคอนเทนเนอร์จะเป็นศูนย์ คุณสามารถแก้ปัญหานี้ได้ด้วยวิธีต่อไปนี้:

1. กำหนดความสูงคงที่ - ในกรณีที่ทราบว่าความสูงของภาชนะควรเป็นเท่าใด
2. ใช้คุณสมบัติล้นที่มีค่าอัตโนมัติหรือค่าที่ซ่อนอยู่กับคอนเทนเนอร์จากนั้นองค์ประกอบลอยจะถูกนำมาพิจารณาเมื่อคำนวณความสูงของคอนเทนเนอร์ วิธีนี้สามารถใช้ได้เมื่อไม่ทราบล่วงหน้าว่าความสูงของภาชนะควรเป็นเท่าใด

คุณสมบัติการลอยใช้งานได้กับ องค์ประกอบบล็อกดังนั้นหากคุณสมบัติลอยถูกนำไปใช้กับองค์ประกอบประเภทอื่นองค์ประกอบเหล่านี้จะถูกแปลงเป็นประเภทบล็อก

หมายเหตุ: องค์ประกอบตำแหน่งแน่นอนและคงที่จะละเว้นคุณสมบัติลอย คุณสมบัติ float ยังไม่มีผลกับ flexboxes