อัปเดตครั้งล่าสุด: 04/21/2016

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

คุณสมบัตินี้สามารถรับค่าใดค่าหนึ่งต่อไปนี้:

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

ขวา: องค์ประกอบเลื่อนไปทางขวา

none: ยกเลิกการตัดและทำให้วัตถุกลับสู่ตำแหน่งปกติ

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

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

ในกรณีนี้ เราจะได้รับการจัดวางองค์ประกอบตามลำดับบนหน้า:

ในหน้าเดียวกันนี้ เราจะใช้คุณสมบัติ float โดยเปลี่ยนสไตล์ดังนี้:

รูปภาพ ( float:left; /* float left */ margin:10px; margin-top:0px; ) .sidebar( border: 2px solid #ccc; background-color: #eee; width: 150px; padding: 10px; margin- ซ้าย:10px; ขนาดตัวอักษร: 20px; float: right; /* float right */ )

ตำแหน่งขององค์ประกอบบนหน้าจะเปลี่ยนไปตาม:

องค์ประกอบที่ใช้คุณสมบัติ float เรียกอีกอย่างว่าองค์ประกอบลอย

ไม่มีการไหลไปรอบๆ ทรัพย์สินที่ชัดเจน

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

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

คุณสมบัติที่ชัดเจนสามารถรับค่าต่อไปนี้:

ซ้าย: องค์ประกอบที่มีสไตล์สามารถพันรอบองค์ประกอบแบบลอยทางด้านขวาได้ ด้านซ้ายไหลไม่ทำงาน

ขวา: องค์ประกอบที่มีสไตล์สามารถลอยไปทางซ้ายขององค์ประกอบลอยเท่านั้น และทางขวามือกระแสน้ำไม่ทำงาน

ทั้งสอง: องค์ประกอบที่มีสไตล์สามารถพันรอบองค์ประกอบลอยและเลื่อนลงโดยสัมพันธ์กับองค์ประกอบเหล่านั้น

ไม่มี: องค์ประกอบที่มีสไตล์ทำงานในลักษณะมาตรฐาน นั่นคือ มีส่วนร่วมในการไหลไปทางซ้ายและขวา

ตัวอย่างเช่น สมมติว่าส่วนท้ายถูกกำหนดไว้บนหน้าเว็บ:

การมีอยู่ของ wrap จะสร้างการแสดงผลที่ไม่ถูกต้องโดยที่ส่วนท้ายเลื่อนขึ้น:

มาเปลี่ยนสไตล์ส่วนท้าย:

ส่วนท้าย ( ขอบด้านบน: 1px solid #ccc; clear: ทั้งสอง; )

ตอนนี้ส่วนท้ายจะไม่ไหลไปรอบๆ รูปภาพ แต่จะเลื่อนลงไป

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

ลำดับการแสดงองค์ประกอบ HTML

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

ภาพหน้าจอด้านล่างเป็นตัวอย่างลำดับมาตรฐานในการแสดงองค์ประกอบ:

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

CSS ลอย

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

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

มาดูค่าที่คุณสมบัติ float สามารถรับได้ มีเพียงสามคนเท่านั้น:

• ซ้าย - องค์ประกอบถูกจัดชิดซ้าย องค์ประกอบที่อยู่ต่ำกว่าจะไหลไปรอบๆ ทางด้านขวา
• right - ค่าตรงข้ามกับค่าก่อนหน้า องค์ประกอบจะจัดชิดทางด้านขวา และองค์ประกอบที่อยู่ด้านล่างจะไหลรอบๆ ไปทางซ้ายตามขอบด้านซ้าย
• ไม่มี - องค์ประกอบไม่พันกันและอยู่ในตำแหน่งปกติ

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

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

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

อย่างที่คุณเห็น CSS ช่วยให้คุณสร้างเค้าโครงหลายคอลัมน์ได้อย่างรวดเร็วและง่ายดายโดยใช้คุณสมบัติเพียงสองอย่างในคู่กัน - ลอย และ ความกว้าง และยิ่งง่ายยิ่งขึ้นไปอีกในการตั้งค่าข้อความเพื่อพันรอบรูปภาพ - เราเพียงแค่ใช้คุณสมบัติ float:right กับมัน

แกะ: คุณสมบัติที่ชัดเจน

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

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

จะรีเซ็ตการห่อได้อย่างไร? คุณสมบัติที่ชัดเจนและคุณค่าของมันจะช่วยเราในเรื่องนี้:

• left - องค์ประกอบที่ใช้คุณสมบัติ clear:left จะไม่ลอยรอบองค์ประกอบด้วยคุณสมบัติ float:left อีกต่อไป แต่ทศนิยมด้านขวาจะยังคงอยู่
• right - องค์ประกอบที่ใช้คุณสมบัติ clear:right จะหยุดการไหลรอบองค์ประกอบด้วยคุณสมบัติ float:right แต่การไหลด้านซ้ายยังคงอยู่
• ทั้งสอง - ยกเลิกการห่อทุกด้านโดยสมบูรณ์ องค์ประกอบจะเลื่อนลงและสร้างโฟลว์มาตรฐาน การไหลรอบองค์ประกอบที่ตามมาก็หยุดส่งผลกระทบเช่นกัน
• ไม่มี - ยกเลิกการเคลียร์เคลียร์ องค์ประกอบจะทำงานตามปกติและจะได้รับผลกระทบจากการตั้งค่าโฟลต

ลองใช้ความรู้ที่เราได้รับและตั้งค่าส่วนท้ายให้ชัดเจน:both:

เป็นผลให้ส่วนท้ายถูกปรับระดับและวางไว้ในตำแหน่งของมัน อย่างไรก็ตาม ผลลัพธ์ของคุณสมบัติ Margin-bottom:10px ซึ่งก่อนหน้านี้เคยใช้กับแถบด้านข้างก็ปรากฏให้เห็นเช่นกัน

รองรับเบราว์เซอร์

คุณสมบัติ float และ clear ได้รับการสนับสนุนโดยเบราว์เซอร์ทั้งหมดที่ใช้งานอยู่ รวมถึง IE6 และ IE7

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

ความกว้างขององค์ประกอบ

หากองค์ประกอบแบบลอยใช้ความกว้างที่มีอยู่ทั้งหมด องค์ประกอบที่เหลือที่ตามมาจะเริ่มขึ้นบรรทัดใหม่ เมื่อต้องการทำเช่นนี้ ความกว้างรวมขององค์ประกอบต้องเป็น 100% ตัวอย่างที่ 1 แสดงวิธีการสร้างลูกศรในหนึ่งบรรทัด

ตัวอย่างที่ 1: การใช้ความกว้าง

แต่ละบล็อกที่มีลูกศรจะใช้ความกว้าง 50% และเพิ่มความกว้างได้สูงสุดถึง 100% ดังนั้นย่อหน้าแล้วลูกศรจึงเริ่มต้นในบรรทัดใหม่

วิธีนี้ไม่ค่อยได้ใช้เนื่องจากไม่สามารถระบุความกว้างขององค์ประกอบได้อย่างชัดเจนเสมอไป และวิธีการนี้ไม่สามารถแก้ปัญหาเกี่ยวกับความสูงของบล็อกและพื้นหลังได้ (รูปที่ 1)

ข้าว. 1. ไม่มีการเติมพื้นหลัง

การใช้ล้น

ทุ่นทำความสะอาด 2

สร้างเว็บเพจดังแสดงในรูป 1. เพื่อแสดงถึงรูเบิล ให้ใช้สัญลักษณ์ ₽

แสดงคำตอบ

คำสั่งซื้อของคุณ

ผลิตภัณฑ์

ราคา

เสื้อยืด

599 รูเบิล

กางเกงขาสั้น

299 รูเบิล

ทั้งหมด

898 รูเบิล

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

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

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

การตั้งค่าคุณสมบัติ float ทำงานดังนี้:

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

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

โฟลตใช้ทำอะไรได้บ้าง?

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

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

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

ปิดการใช้งานคุณสมบัติลอย

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

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

#footer ( ชัดเจน: ทั้งสอง; )

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

การล่มสลายครั้งใหญ่

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

การล่มสลายครั้งนี้ดูเหมือนไร้เหตุผล แต่ทางเลือกอื่นกลับแย่กว่านั้นอีก ลองพิจารณาตัวอย่างนี้:

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

ดังนั้นการยุบจึงจำเป็นเกือบทุกครั้งเพื่อป้องกันปัญหาเค้าโครง หากต้องการเปลี่ยนลักษณะการทำงานนี้ คุณต้องเพิ่มองค์ประกอบการยกเลิก float หลังองค์ประกอบ float แต่ก่อนที่จะปิดองค์ประกอบหลัก

วิธียกเลิกการลอยตัว

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

• วิธีการ div ว่างเปล่ามีการใช้ div ที่ว่างเปล่าอย่างแท้จริง
  - บางครั้งองค์ประกอบอาจใช้แทนได้
  หรืออะไรก็ตาม แต่ div ถูกใช้บ่อยที่สุดเพราะตามค่าเริ่มต้นแล้วมันไม่มีสไตล์ ไม่มีจุดประสงค์พิเศษ และไม่น่าจะมีสไตล์ทั่วไปที่ใช้กับ CSS ผู้ชื่นชอบมาร์กอัปที่สื่อความหมายเพียงอย่างเดียวอาจไม่ชอบวิธีนี้ เนื่องจากการมีอยู่ของ div ที่ว่างเปล่าไม่มีความหมายตามบริบท และจะถูกวางไว้บนหน้าด้วยเหตุผลด้านการออกแบบเท่านั้น แน่นอนว่าพูดอย่างเคร่งครัดพวกเขาพูดถูก แต่เขากำลังทำงานของเขาและไม่ทำร้ายใครเลย
• วิธีการล้นขึ้นอยู่กับข้อเท็จจริงที่ว่าองค์ประกอบหลักจำเป็นต้องตั้งค่าคุณสมบัติโอเวอร์โฟลว์ หากคุณสมบัตินี้ถูกตั้งค่าเป็น auto หรือ ถูกซ่อน องค์ประกอบหลักจะขยายเพื่อรองรับองค์ประกอบลอยทั้งหมด วิธีนี้ดูเหมือนถูกต้องตามความหมายมากกว่าเนื่องจากไม่ต้องการองค์ประกอบเพิ่มเติม อย่างไรก็ตาม หากคุณต้องใช้ div อื่นเพียงเพื่อใช้แนวทางนี้ (หมายถึง div ระดับบนสุด) ก็จะเหมือนกับตัวอย่างก่อนหน้านี้โดยการเพิ่ม div ว่าง นอกจากนี้ โปรดจำไว้ว่าคุณสมบัติโอเวอร์โฟลว์มีจุดประสงค์ที่แตกต่างกัน โปรดใช้ความระมัดระวังและอย่าให้เนื้อหาบางส่วนของคุณหายไปหรือแถบเลื่อนที่ไม่จำเป็นปรากฏขึ้น
• วิธีทำความสะอาดง่ายๆ.วิธีนี้ใช้ตัวเลือกหลอก CSS ที่ยอดเยี่ยม :after ดีกว่าการใช้โอเวอร์โฟลว์กับองค์ประกอบหลักมาก คุณเพียงแค่ให้คลาสเพิ่มเติมแก่มัน โดยประกาศดังนี้: .clearfix:after ( content: "."; การมองเห็น: ซ่อน; จอแสดงผล: บล็อก; ความสูง: 0; ชัดเจน: ทั้งสอง; ) วิธีการนี้เพิ่มเนื้อหาที่มองไม่เห็นและยกเลิกการลอย อย่างไรก็ตาม นี่ไม่ใช่เรื่องราวทั้งหมดเกี่ยวกับวิธีการใช้โค้ดเพิ่มเติมในเบราว์เซอร์รุ่นเก่า

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

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

ปัญหาเกี่ยวกับการลอยตัว

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

ทางเลือกอื่นในการลอยตัว

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

ในบทความนี้ฉันตัดสินใจวิเคราะห์ปัญหาหนึ่งที่บางครั้งเกิดขึ้นระหว่างเลย์เอาต์และในขณะเดียวกันก็ยากมากที่จะหาวิธีแก้ไขบนอินเทอร์เน็ต ในบทความนี้เราจะวิเคราะห์ปัญหา การยกเลิกโฟลตบางส่วนใน CSSและฉันจะแสดงวิธีแก้ปัญหาให้คุณดูด้วย

ลองดูรหัสนี้:

บล็อกซ้าย

ข้อความบทความ

#ซ้าย (
เส้นขอบขวา: 5px ทึบ #000;
ลอย: ซ้าย;
ความสูง: 400px;
ความกว้าง: 200px;
}
#ขวา (
ขอบซ้าย: 220px;
}
#ขวา img (
ลอย: ซ้าย;
}

งานของเราคืออะไร? ทำ 2 คอลัมน์: คอลัมน์ด้านซ้ายมีเนื้อหาบางส่วน คอลัมน์ด้านขวามีบทความ และบทความนี้ก็มีรูปภาพด้วย ลอย: ซ้าย;(เช่นเดียวกับบล็อกด้านซ้าย) ต่อไปเราต้องการแสดงบล็อกที่มีข้อมูลเกี่ยวกับบทความ แน่นอนว่าเราไม่ต้องการให้ข้อมูลนี้อยู่ทางด้านขวาของภาพ ดังนั้นเราจึงเพิ่ม บล็อกที่ชัดเจน- อย่างไรก็ตาม มีเรื่องประหลาดใจรอเราอยู่ที่นี่

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

#ขวา (
ขอบซ้าย: 220px;
ล้น: ซ่อนเร้น;
}

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