เค้าโครง CSS - ชัดเจนและชัดเจน

สารบัญ

    แสดงสารบัญ

คุณสมบัติ CSS clear

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

clear คุณสมบัติระบุสิ่งที่ ควรเกิดขึ้นกับองค์ประกอบที่อยู่ถัดจากองค์ประกอบลอย

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

none

- องค์ประกอบไม่ได้ถูกผลักไว้ด้านล่างองค์ประกอบลอยด้านซ้ายหรือขวา นี่เป็นค่าเริ่มต้น

left

- องค์ประกอบถูกผลักไว้ด้านล่างองค์ประกอบลอยด้านซ้าย

right

- องค์ประกอบถูกผลักไว้ด้านล่างองค์ประกอบลอยด้านขวา

both

- องค์ประกอบถูกผลักไว้ด้านล่างองค์ประกอบลอยทั้งซ้ายและขวา

inherit

- องค์ประกอบสืบทอดค่าที่ชัดเจนจากองค์ประกอบหลัก

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

ตัวอย่าง

ตัวอย่างนี้จะล้างโฟลตไปทางซ้าย ในที่นี้ก็หมายความว่า องค์ประกอบถูกผลักไว้ด้านล่างองค์ประกอบ ที่ลอยอยู่ทางซ้าย:

div1 {
  float: left;
}
div2 {
  clear: left;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>
</html>

แฮ็ค clearfix

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

Without Clearfix

With Clearfix

ตัวอย่าง

.clearfix {
  overflow: auto;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix {
  overflow: auto;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

overflow: auto clearfix ทำงานได้ดีตราบเท่าที่คุณสามารถควบคุมระยะขอบและช่องว่างภายในของคุณได้ (มิฉะนั้นคุณ อาจเห็นแถบเลื่อน) ที่ อย่างไรก็ตาม แฮ็ก clearfix ใหม่ที่ทันสมัย ปลอดภัยกว่า และโค้ดต่อไปนี้ใช้สำหรับหน้าเว็บส่วนใหญ่:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับองค์ประกอบหลอก ::after ในบทต่อๆ ไป