เมื่อใช้เค้าโครงหน้าเว็บ DivCSS มักจะใช้โฟลต สิ่งชั่วร้ายหลายอย่างอาจเกิดจากการลอยตัวในอดีตมีการแนะนำมากมาย การล้างโฟลตเป็นสิ่งที่จำเป็น และการล้างโฟลตจากองค์ประกอบหลักเมื่อใดก็ตามถือเป็นนิสัยที่ดีในการเขียน CSS
มาดูบทช่วยสอนของวันนี้กัน นี่คือซอร์สโค้ดแบบลอยที่ยังไม่ถูกล้าง คุณไม่สามารถมองเห็นพื้นหลังสีเหลืองอ่อนขององค์ประกอบหลักเมื่อรันโค้ด
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <style type="text/css">
-
*{ระยะขอบ:0;ช่องว่างภายใน:0;}
เนื้อความ{แบบอักษร:36px ตัวหนา; สี:#F00; การจัดตำแหน่งข้อความ:ศูนย์;}
#layout{พื้นหลัง:#FF9;}
#left{ลอย:ซ้าย;ความกว้าง:20%;ความสูง:200px;พื้นหลัง:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;พื้นหลัง:#DDD;line-height:80px;}
-
</สไตล์>
<div id="เค้าโครง">
<div id="left">ซ้าย</div>
<div id="right">ขวา</div>
</div>
ดังแสดงในรูปก่อนเคลียร์ทุ่น:
1. ใช้ป้ายกำกับเปล่าเพื่อล้างโฟลต วิธีที่ฉันใช้มานานแล้วคือแท็กว่างอาจเป็นแท็ก div หรือแท็ก P ฉันคุ้นเคยกับการใช้ <P> ซึ่งสั้นเพียงพอ หลายๆ คนก็ใช้ <hr> เช่นกัน แต่พวกเขาแค่ต้องล้างเส้นขอบให้ชัดเจน แต่ในทางทฤษฎีแล้ว มันอาจเป็นแท็กใดก็ได้ วิธีนี้คือการเพิ่มแท็กดังกล่าวเพื่อล้างโฟลต หลังจากที่องค์ประกอบลอยทั้งหมดภายในองค์ประกอบพาเรนต์แบบลอยตัวจำเป็นต้องได้รับการล้าง และกำหนดโค้ด CSS สำหรับมัน: clear:both ข้อเสียของแนวทางนี้คือการเพิ่มองค์ประกอบโครงสร้างที่ไม่มีความหมาย
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <style type="text/css">
-
*{ระยะขอบ:0;ช่องว่างภายใน:0;}
เนื้อความ{แบบอักษร:36px ตัวหนา; สี:#F00; การจัดตำแหน่งข้อความ:ศูนย์;}
#layout{พื้นหลัง:#FF9;}
#left{ลอย:ซ้าย;ความกว้าง:20%;ความสูง:200px;พื้นหลัง:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;พื้นหลัง:#DDD;line-height:80px;}
.clr{ชัดเจน:ทั้งสอง;}
-
</สไตล์>
<div id="เค้าโครง">
<div id="left">ซ้าย</div>
<div id="right">ขวา</div>
<p class="clr">
</div>
วิธีนี้จะแก้ไขข้อเสียของการต้องเพิ่มโค้ดที่ไม่ได้ตั้งใจได้อย่างมีประสิทธิภาพโดยการล้างโฟลตผ่านองค์ประกอบป้ายกำกับเปล่า หากต้องการใช้วิธีนี้ คุณเพียงแค่ต้องกำหนดคุณสมบัติ CSS: overflow:auto ในองค์ประกอบที่ต้องเคลียร์จากการลอย เท่านี้ก็เรียบร้อย! "zoom:1" มีไว้สำหรับความเข้ากันได้กับ IE6
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <style type="text/css">
-
*{ระยะขอบ:0;ช่องว่างภายใน:0;}
เนื้อความ{แบบอักษร:36px ตัวหนา; สี:#F00; การจัดตำแหน่งข้อความ:ศูนย์;}
#layout{พื้นหลัง:#FF9;overflow:auto;zoom:1;}
#left{ลอย:ซ้าย;ความกว้าง:20%;ความสูง:200px;พื้นหลัง:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;พื้นหลัง:#DDD;line-height:80px;}
-
</สไตล์>
<div id="เค้าโครง">
<div id="left">ซ้าย</div>
<div id="right">ขวา</div>
</div>
วิธีการนี้ใช้ได้กับเบราว์เซอร์ที่ไม่ใช่ IE เท่านั้น โปรดดูตัวอย่างต่อไปนี้สำหรับวิธีการเขียนเฉพาะ โปรดใส่ใจกับประเด็นต่อไปนี้ระหว่างการใช้งาน 1. ในวิธีนี้ ต้องตั้งค่าความสูง:0 สำหรับวัตถุหลอกที่ต้องการล้างองค์ประกอบลอย ไม่เช่นนั้นองค์ประกอบจะสูงกว่าค่าจริงหลายพิกเซล 2. จำเป็นต้องมีแอตทริบิวต์เนื้อหา แต่ค่าอาจเป็นได้ การอภิปรายในอุดมคติที่ว่างเปล่า สีน้ำเงิน ในวิธีนี้ ค่าของแอตทริบิวต์เนื้อหาจะถูกตั้งค่าเป็น "." แต่ฉันพบว่าสามารถปล่อยว่างไว้ได้เช่นกัน
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <style type="text/css">
-
*{ระยะขอบ:0;ช่องว่างภายใน:0;}
เนื้อความ{แบบอักษร:36px ตัวหนา; สี:#F00; การจัดตำแหน่งข้อความ:ศูนย์;}
#layout{พื้นหลัง:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{ลอย:ซ้าย;ความกว้าง:20%;ความสูง:200px;พื้นหลัง:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;พื้นหลัง:#DDD;line-height:80px;}
-
</สไตล์>
<div id="เค้าโครง">
<div id="left">ซ้าย</div>
<div id="right">ขวา</div>
</div>
ดังแสดงในรูปหลังจากลอยชัดเจน:
แต่ละวิธีมีข้อดีและข้อเสีย และคุณควรเลือกวิธีที่ดีที่สุดเมื่อเปรียบเทียบ วิธีที่สองจะดีกว่า
