กฎ CSS ต่อไปนี้ทำอะไร:

.clear { clear: both; }

และทำไมเราต้องใช้มัน?

ฉันจะไม่อธิบายวิธีลอยทำงานที่นี่ (ในรายละเอียด) ตามคำถามนี้มักจะมุ่งเน้นไปที่ ทำไมใช้clear: both;หรือสิ่งที่จะclear: both;ทำ ...

ฉันจะตอบคำถามนี้ให้ง่ายและตรงประเด็นและจะอธิบายให้คุณทราบในเชิงกราฟิกว่าทำไมจึงclear: both;มีความจำเป็นหรือสิ่งที่ทำ ...

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

ทำไมมันลอยองค์ประกอบ?

องค์ประกอบจะลอยเมื่อนักออกแบบต้องการองค์ประกอบระดับบล็อก 2 เคียงข้างกัน ตัวอย่างเช่นเราต้องการออกแบบเว็บไซต์พื้นฐานที่มีเลย์เอาต์ด้านล่าง ...

ตัวอย่างสดของภาพตัวอย่าง

รหัสสำหรับการสาธิต

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

หมายเหตุ: คุณอาจจะต้องเพิ่มheader, footer, aside, section(และองค์ประกอบ HTML5 อื่น ๆ ) ในฐานะdisplay: block;ในสไตล์ชีตของคุณสำหรับการอย่างชัดเจนการกล่าวขวัญว่าองค์ประกอบเป็นองค์ประกอบระดับบล็อก

คำอธิบาย:

ฉันมีเค้าโครงพื้นฐานส่วนหัว 1 แถบด้านข้าง 1 พื้นที่เนื้อหา 1 และส่วนท้าย 1 ส่วน

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

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

1. พฤติกรรมปกติขององค์ประกอบระดับบล็อก
2. พฤติกรรมลอยตัวขององค์ประกอบระดับบล็อก

ดังนั้นตามที่คุณทราบซ้ายที่ลอยdivออกจากพื้นที่ไปทางขวาไม่ได้ใช้ซึ่งจะช่วยให้divหลังจากที่จะเปลี่ยนในพื้นที่ที่เหลือ

1. divจะแสดงผลทีละภาพถ้าไม่ลอย
2. div จะเลื่อนไปด้านข้างถ้าลอยไปทางซ้ายหรือขวา

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

ดังนั้นหากคุณสังเกตในรูปแบบการสาธิต - ในกรณีที่คุณลืมนี่คือ ..

ฉันใช้ระดับที่เรียกว่า.clearและมันถือคุณสมบัติที่เรียกว่ามีมูลค่าclear เพื่อช่วยให้ดูว่าทำไมมันต้องbothboth

ฉันลอยasideและsectionองค์ประกอบทางด้านซ้ายดังนั้นสมมติว่าสถานการณ์ที่เรามีสระว่ายน้ำที่headerเป็นดินแดนที่มั่นคงasideและsectionลอยอยู่ในสระว่ายน้ำและส่วนท้ายเป็นดินแดนที่มั่นคงอีกครั้งบางสิ่งเช่นนี้ ..

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

1. การไหลปกติของเอกสาร
2. ส่วนที่ลอยไปทางซ้าย
3. เคลียร์ Floated Element เพื่อยืดสีพื้นหลังของภาชนะ

(อ้างถึงส่วน^[Clearfix]ของคำตอบนี้สำหรับวิธีที่เป็นระเบียบในการทำสิ่งนี้ฉันใช้divตัวอย่างที่ว่างเปล่าเพื่อจุดประสงค์ในการอธิบาย)

ฉันได้ให้ตัวอย่าง 3 ข้อข้างต้นอันดับที่ 1 เป็นผังเอกสารปกติที่redพื้นหลังจะแสดงตามที่คาดไว้เนื่องจากคอนเทนเนอร์ไม่เก็บวัตถุที่ลอยอยู่

ในตัวอย่างที่สองเมื่อวัตถุลอยไปทางซ้ายองค์ประกอบคอนเทนเนอร์ (POOL) จะไม่ทราบขนาดขององค์ประกอบลอยและด้วยเหตุนี้มันจะไม่ยืดความสูงองค์ประกอบลอย

หลังจากใช้clear: both;แล้วส่วนประกอบของคอนเทนเนอร์จะถูกยืดออกไปจนถึงขนาดองค์ประกอบลอย

อีกเหตุผลหนึ่งที่ clear: both;ใช้คือการป้องกันไม่ให้องค์ประกอบเลื่อนขึ้นในพื้นที่ที่เหลือ

สมมติว่าคุณต้องการองค์ประกอบ 2 รายการเคียงข้างกันและอีกองค์ประกอบหนึ่งอยู่ด้านล่าง ... ดังนั้นคุณจะลอย 2 องค์ประกอบไปทางซ้ายและคุณต้องการอีกองค์ประกอบหนึ่งที่อยู่ด้านล่าง

1. divลอยไปทางซ้ายทำให้sectionเคลื่อนที่ไปในอวกาศที่เหลือ
2. ลอยน้ำdivล้างเพื่อให้sectionแท็กจะแสดงด้านล่างลอยdivs

ตัวอย่างที่ 1

ตัวอย่างที่ 2

สุดท้าย แต่ไม่ท้ายสุดfooterแท็กจะถูกแสดงหลังจากองค์ประกอบลอยเนื่องจากฉันใช้clearคลาสก่อนที่จะประกาศfooterแท็กของฉันซึ่งทำให้มั่นใจได้ว่าองค์ประกอบลอย (ซ้าย / ขวา) ทั้งหมดจะถูกล้างจนถึงจุดนั้น

Clearfix

มาถึง clearfix ซึ่งเกี่ยวข้องกับลอย ตามที่ระบุไว้แล้วโดย@Elkyวิธีที่เราล้างข้อมูลการลอยเหล่านี้ไม่ใช่วิธีที่สะอาดในการทำตามที่เราใช้divองค์ประกอบที่ว่างซึ่งไม่ใช่divองค์ประกอบที่มีไว้สำหรับ ดังนั้นที่นี่ clearfix มา

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

เมื่อต้องการล้างองค์ประกอบของ wrapper ที่มีองค์ประกอบลอยเราสามารถใช้

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

สังเกต:afterองค์ประกอบหลอกที่ฉันใช้เพื่อสิ่งclassนั้น ที่จะสร้างองค์ประกอบเสมือนสำหรับองค์ประกอบ wrapper ก่อนที่จะปิดตัวเอง ถ้าเราดูใน dom คุณสามารถดูว่ามันปรากฏในแผนผังเอกสารได้อย่างไร

ดังนั้นถ้าคุณเห็นมันจะแสดงผลหลังจากเด็กลอยdivที่เราล้างลอยซึ่งไม่มีอะไร แต่เทียบเท่ากับการมีdivองค์ประกอบที่ว่างเปล่าที่มีclear: both;คุณสมบัติที่เราใช้สำหรับเรื่องนี้เช่นกัน ตอนนี้ทำไมdisplay: table;และcontentอยู่นอกขอบเขตคำตอบนี้ แต่คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับองค์ประกอบหลอกได้ที่นี่องค์ประกอบหลอกนี่

โปรดทราบว่านี้จะทำงานใน IE8 เป็นIE8 สนับสนุน:afterหลอก

คำตอบเดิม:

นักพัฒนาส่วนใหญ่ลอยเนื้อหาของพวกเขาไปทางซ้ายหรือขวาบนหน้าของพวกเขาอาจ divs ถือโลโก้แถบด้านข้างเนื้อหา ฯลฯ divs เหล่านี้จะลอยไปทางซ้ายหรือขวาออกจากส่วนที่เหลือของพื้นที่ที่ไม่ได้ใช้และด้วยเหตุนี้ถ้าคุณวางคอนเทนเนอร์อื่น ๆ ลอยเกินไปในพื้นที่ที่เหลือดังนั้นเพื่อป้องกันการclear: both;ใช้มันจะล้างองค์ประกอบทั้งหมดที่ลอยไปทางซ้ายหรือขวา

สาธิต:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

ตอนนี้ถ้าคุณต้องการให้ div อื่น ๆ แสดงผลด้านล่างdiv1ดังนั้นคุณจะใช้clear: both;ดังนั้นมันจะช่วยให้คุณแน่ใจว่าคุณได้ทำการล้างโฟลตซ้ายหรือขวา

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

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

clear: none; องค์ประกอบยังคงอยู่ติดกับองค์ประกอบลอย

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left; องค์ประกอบผลักองค์ประกอบด้านล่างลอยซ้าย

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right; องค์ประกอบผลักองค์ประกอบด้านล่างลอยขวา

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both; องค์ประกอบผลักด้านล่างองค์ประกอบลอยทั้งหมด

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

clear ไม่มีผลต่อการลอยนอกบริบทการจัดรูปแบบบล็อกปัจจุบัน

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

CSS float และชัดเจน

ซอตัวอย่าง

เพียงลองลบclear:bothคุณสมบัติออกจากdivด้วยclass sampleและดูว่ามันลอยตามมาdivsอย่างไร

คำตอบของนายเอเลี่ยนนั้นสมบูรณ์แบบ แต่อย่างไรก็ตามฉันไม่แนะนำให้ใช้<div class="clear"></div>เพราะมันเป็นแค่แฮ็คที่ทำให้มาร์กอัปของคุณสกปรก นี่เป็นสิ่งที่ไร้ประโยชน์divในแง่ของโครงสร้างที่ไม่ดีและความหมายทำให้โค้ดของคุณไม่ยืดหยุ่น ในเบราว์เซอร์บางตัว div นี้ทำให้มีความสูงเพิ่มขึ้นและคุณต้องเพิ่มheight: 0;ว่ายิ่งแย่ลงไปกว่าเดิม แต่ปัญหาที่แท้จริงเริ่มต้นเมื่อคุณต้องการเพิ่มพื้นหลังหรือเส้นขอบรอบองค์ประกอบลอยของคุณ - มันก็จะยุบเพราะเว็บที่ถูกออกแบบมาไม่ดี ฉันแนะนำให้ห่อองค์ประกอบลอยในภาชนะที่มีกฎ CSS clearfix นี่คือแฮ็คเช่นกัน แต่สวยงามยืดหยุ่นได้มากกว่าในการใช้งานและอ่านได้สำหรับหุ่นยนต์มนุษย์และ SEO

เมื่อคุณต้องการวางองค์ประกอบหนึ่งที่องค์ประกอบอื่น ๆ ด้านล่างคุณใช้รหัสนี้ใน CSS มันใช้สำหรับลอย

หากคุณลอยเนื้อหาคุณสามารถลอยไปทางซ้ายหรือขวา ... ดังนั้นในเค้าโครงทั่วไปคุณอาจมีการนำทางด้านซ้าย div เนื้อหาและส่วนท้าย

เพื่อให้แน่ใจว่าส่วนท้ายอยู่ด้านล่างทั้งสองของโฟลต (ถ้าคุณลอยไปทางซ้ายและขวา) จากนั้นคุณวางท้าย clear: bothแล้วคุณใส่ท้ายเป็น

วิธีนี้จะอยู่ด้านล่างทั้งสองลอย

(ถ้าคุณเหลือแค่การล้างคุณก็แค่ต้องการ clear: left;เท่านั้น)

ผ่านบทช่วยสอนนี้: