เมื่อใดและอย่างไรจึงจะใช้ CSS Clearfix Hack

ในฐานะผู้เขียนโค้ดและโปรแกรมเมอร์ในการสร้าง CSS Flexbox และ CSS Grid เรามักไม่พิจารณา CSS Clearfix CSS Flexbox และ Grid แก้ไขตำแหน่งขององค์ประกอบได้ดีขึ้นเล็กน้อย (และง่ายกว่าเล็กน้อย!) กว่าการใช้ floats

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

ในบทความนี้ เราจะสำรวจการแฮ็ก clearfix และหารือเกี่ยวกับ display:flow-root เป็นการแทนที่โซลูชัน clearfix ที่ใหม่กว่า

โฟลตคืออะไร

เมื่อใดและอย่างไรจึงจะใช้ CSS Clearfix Hack

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

<!DOCTYPE html>
<html lang="en>
<head>
	<title>CSS Clearfix</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
body {
  background-color: grey;
}

ul {
  max-width: 800px;
  width: 100%;
  background: lightblue;
  border: 5px double black;
  padding: 20px;
}

img {
  width: 300px;
  margin: 20px;
}

li {
  list-style: none;
  float: left;
}

</style>
</head>
<body>
<!-- https://unsplash.com/photos/2PPjq7I3bs4 -->
<ul>
  <li>
    <img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" />     </li>
<!--  https://unsplash.com/photos/vYhBeZ_G_xE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" />     </li>
<!--  https://unsplash.com/photos/7UduWMpT618  -->
  <li>
    <img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" />     </li>
<!--  https://unsplash.com/photos/Ah_QC2v2alE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />     
  </li>
<!--  https://unsplash.com/photos/T-0EW-SEbsE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />     </li>
</ul>
<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?</p>
</body>
</html>

ขณะนี้มีภาพบางส่วนที่ควรจะเป็น <ul> คอนเทนเนอร์ที่มีพื้นหลังสีฟ้าอ่อน แต่ภาพเหล่านั้นสูงกว่าองค์ประกอบอื่นๆ ของ <ul> . ส่งผลให้มีน้ำล้นที่ไม่ล้างทุ่นลอยและยุบระยะขอบแนวนอน

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

การแก้ไข

วิธีแก้ปัญหาแรกที่เป็นไปได้คือสิ่งที่เรียกว่า clearfix hack . แฮ็คนี้แทรกเนื้อหาว่างบางส่วนหลังคอนเทนเนอร์หลักเพื่อขยายเพื่อรวมองค์ประกอบแบบลอย เราจะใช้ pseudo-element ::after เพื่อให้บรรลุสิ่งนี้:

<!DOCTYPE html>
<html lang="en>
<head>
	<title>CSS Clearfix</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
body {
  background-color: grey;
}

ul {
  max-width: 800px;
  width: 100%;
  background: lightblue;
  border: 5px double black;
  padding: 20px;
}

img {
  width: 300px;
}

li {
  list-style: none;
  float: left;
  margin: 20px;
}

.clearfix-hack::after {
  content: " ";
  clear: both;
  display: table;
}

</style>
</head>
<body>
<!-- https://unsplash.com/photos/2PPjq7I3bs4 -->
<ul>
  <li>
    <img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" />     </li>
<!--  https://unsplash.com/photos/vYhBeZ_G_xE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" />     </li>
<!--  https://unsplash.com/photos/7UduWMpT618  -->
  <li>
    <img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" />     </li>
<!--  https://unsplash.com/photos/Ah_QC2v2alE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />     
  </li>
<!--  https://unsplash.com/photos/T-0EW-SEbsE  -->
  <li>
    <img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />     </li>
</ul>
<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?</p>
</body>
</html>

นอกเหนือจากระยะขอบเล็กน้อย ฉันได้เพิ่มใน <li> เพื่อให้การเว้นวรรคดีขึ้น สิ่งที่เพิ่มเข้ามาคือ .clearfix-hack::after ตัวเลือก ต้องใช้คุณสมบัติสามประการ:เนื้อหา แสดง และชัดเจน

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

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

ส่งผลให้สามารถแสดงรูปภาพภายในคอนเทนเนอร์และแท็ก

ด้านล่างได้

นี่คือจุดจบของ Clearfix หรือไม่

ด้วยการถือกำเนิดของ Flexbox และ Grid ความต้องการ clearfix จะหายไป มากยิ่งขึ้นด้วยวิธีการใหม่ในการจัดการ clearfix ใน CSS:

.clearfix-hack {
	display: flow-root
}

แทนที่ .clearfix-hack::after ตัวเลือกด้วยรหัสด้านบน มีอะไรเปลี่ยนแปลงไหม
display: flow-root ทำการแฮ็ก clearfix ให้เราและทำให้โค้ดของเราอ่านง่ายยิ่งขึ้น

บทสรุป

เราได้พูดคุยถึงสองวิธีที่แตกต่างกันในการแก้ไขจุดบกพร่องที่สร้างขึ้นเมื่อเราเพิ่มคุณสมบัติ float ให้กับองค์ประกอบย่อย:การแฮ็ก clearfix และการใช้ display: flow-root . เป็นไปได้มากกว่าที่คุณจะใช้การแฮ็กเหล่านี้กับโค้ดเดิมเท่านั้น และไม่ใช้กับโค้ดใดๆ ที่คุณสร้างขึ้นตั้งแต่เริ่มต้นจริงๆ เนื่องจากการสร้าง Flexbox และ Grid