ฉันมีปัญหาอายุของการdivตัดเค้าโครงสองคอลัมน์ แถบด้านข้างของฉันลอยดังนั้นภาชนะของฉันdivล้มเหลวในการห่อเนื้อหาและแถบด้านข้าง

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

ดูเหมือนจะมีวิธีการมากมายในการแก้ไขข้อผิดพลาดที่ชัดเจนใน Firefox:

• <br clear="all"/>
• overflow:auto
• overflow:hidden

ในสถานการณ์ของฉันสิ่งเดียวที่ดูเหมือนว่าจะทำงานอย่างถูกต้องคือ<br clear="all"/>วิธีการแก้ปัญหาซึ่งสกปรกเล็กน้อย overflow:autoให้แถบเลื่อนที่น่ารังเกียจแก่ฉันและoverflow:hiddenต้องมีผลข้างเคียงอย่างแน่นอน นอกจากนี้เห็นได้ชัดว่า IE7 ไม่ควรประสบปัญหานี้เนื่องจากพฤติกรรมที่ไม่ถูกต้อง แต่ในสถานการณ์ของฉันมันเป็นเช่นเดียวกับ Firefox

วิธีใดที่เราสามารถใช้งานได้ในปัจจุบันนั้นแข็งแกร่งที่สุด?

โซลูชัน CSS clearfix ด้านล่างแต่ละรายการมีประโยชน์ของตัวเองทั้งนี้ขึ้นอยู่กับการออกแบบที่กำลังผลิต

clearfix มีแอปพลิเคชั่นที่มีประโยชน์ แต่มันถูกใช้เป็นแฮ็ก ก่อนที่คุณจะใช้ clearfix โซลูชัน css ที่ทันสมัยเหล่านี้อาจมีประโยชน์:

• CSS flexbox
• css grid

โซลูชั่น Clearfix ที่ทันสมัย

คอนเทนเนอร์ด้วย overflow: auto;

วิธีที่ง่ายที่สุดในการล้างองค์ประกอบลอยที่ใช้สไตล์overflow: autoในองค์ประกอบที่มี วิธีนี้ใช้ได้กับเบราว์เซอร์สมัยใหม่ทุกตัว

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

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

การใช้ 'โอเวอร์โฟลว์: ซ่อนอยู่' ยังเป็นโซลูชันที่ชัดเจน แต่จะไม่มีแถบเลื่อน แต่การใช้hiddenจะครอบตัดเนื้อหาใด ๆ ที่อยู่นอกตำแหน่งขององค์ประกอบที่มี

หมายเหตุ:องค์ประกอบที่ลอยเป็นimgแท็กในตัวอย่างนี้ แต่อาจเป็นองค์ประกอบ html ใด ๆ

Clearfix โหลดใหม่

Thierry Koblentz บน CSSMojo เขียน: Reloaded clearfix มากล่าสุด เขาตั้งข้อสังเกตว่าโดยการลดการสนับสนุน oldIE โซลูชันสามารถทำให้ง่ายขึ้นสำหรับคำสั่ง css เดียว นอกจากนี้การใช้display: block(แทนdisplay: table) อนุญาตให้ระยะขอบยุบอย่างถูกต้องเมื่อองค์ประกอบที่มี clearfix เป็นพี่น้อง

.container::after {
  content: "";
  display: block;
  clear: both;
}

นี่เป็นเวอร์ชั่นล่าสุดของ clearfix

⋮

⋮

โซลูชั่น Clearfix ที่เก่ากว่า

โซลูชันด้านล่างไม่จำเป็นสำหรับเบราว์เซอร์รุ่นใหม่ แต่อาจมีประโยชน์สำหรับการกำหนดเป้าหมายเบราว์เซอร์รุ่นเก่า

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

พวกเขาจะถูกระบุไว้ในลำดับตามลำดับ

"Beat That ClearFix", clearfix สำหรับเบราว์เซอร์รุ่นใหม่

Thierry Koblentz 'ของCSS Mojoได้ชี้ให้เห็นว่าเมื่อกำหนดเป้าหมายเบราว์เซอร์ที่ทันสมัยตอนนี้เราสามารถวางzoomและ::beforeทรัพย์สิน / ค่าและเพียงใช้:

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

วิธีนี้ไม่รองรับ IE 6/7 …โดยเจตนา!

Thierry ยังเสนอ: " คำเตือน : ถ้าคุณเริ่มโครงการใหม่ตั้งแต่เริ่มต้นให้ไปหามัน แต่อย่าสลับเทคนิคนี้กับที่คุณมีอยู่ตอนนี้เพราะแม้ว่าคุณจะไม่สนับสนุน oldie กฎที่มีอยู่ของคุณก็ป้องกันไว้ การยุบขอบ "

Micro Clearfix

วิธีการแก้ปัญหา clearfix ล่าสุดและนำมาใช้ทั่วโลกที่ไมโคร Clearfix โดยนิโคลัสกัลลาเกอร์

การสนับสนุนที่ทราบ: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

คุณสมบัติล้น

วิธีการพื้นฐานนี้เป็นที่ต้องการสำหรับกรณีปกติเมื่อเนื้อหาที่ถูกจัดตำแหน่งจะไม่แสดงนอกขอบเขตของคอนเทนเนอร์

http://www.quirksmode.org/css/clearing.html - อธิบายวิธีแก้ไขปัญหาทั่วไปที่เกี่ยวข้องกับเทคนิคนี้ ได้แก่ การตั้งค่าwidth: 100%บนคอนเทนเนอร์

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

แทนที่จะใช้displayคุณสมบัติการชุด "haslayout" สำหรับ IE คุณสมบัติอื่น ๆ ที่สามารถใช้สำหรับการเรียก "haslayout" สำหรับองค์ประกอบ

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

อีกวิธีในการล้างข้อมูลลอยโดยใช้overflowคุณสมบัตินี้คือการใช้การขีดเส้นใต้แฮ็ค IE จะใช้ค่านำหน้าด้วยขีดล่างเบราว์เซอร์อื่นจะไม่ zoomคุณสมบัติเป็นต้นเหตุhaslayoutใน IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

ในขณะที่ใช้งานได้ ... มันไม่เหมาะที่จะใช้แฮ็ก

PIE: วิธีการหักล้างอย่างง่าย

เมธอด "การล้างค่าแบบง่าย" รุ่นเก่านี้มีข้อได้เปรียบในการอนุญาตให้องค์ประกอบต่างๆวางตำแหน่งอยู่นอกขอบเขตของคอนเทนเนอร์

โซลูชันนี้ค่อนข้างเก่า แต่คุณสามารถเรียนรู้ทั้งหมดเกี่ยวกับการหักล้างตำแหน่งอย่างง่ายได้ทุกอย่าง: http://www.positioniseverything.net/easyclearing.html

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

วิธีแก้ปัญหาที่รวดเร็วและสกปรก (พร้อมข้อเสียบางประการ) เมื่อคุณตบบางอย่างเข้าด้วยกัน:

<br style="clear: both" /> <!-- So dirty! -->

ข้อเสีย

• มันไม่ตอบสนองและอาจไม่ให้ผลที่ต้องการหากรูปแบบเค้าโครงเปลี่ยนไปตามการสืบค้นของสื่อ ทางออกใน CSS บริสุทธิ์นั้นเหมาะกว่า
• มันเพิ่มมาร์กอัป html โดยไม่จำเป็นต้องเพิ่มค่าความหมายใด ๆ
• มันต้องการคำจำกัดความแบบอินไลน์และวิธีแก้ปัญหาสำหรับแต่ละอินสแตนซ์แทนที่จะอ้างอิงคลาสกับโซลูชันเดียวของ "clearfix" ใน css และการอ้างอิงคลาสใน HTML
• มันทำให้รหัสยากที่จะทำงานกับคนอื่นเพราะพวกเขาอาจจะต้องเขียน hacks เพิ่มเติมเพื่อหลีกเลี่ยงมัน
• ในอนาคตเมื่อคุณต้องการ / ต้องการใช้โซลูชันการแก้ไขปัญหาที่ชัดเจนอื่นคุณจะไม่ต้องย้อนกลับและลบ<br style="clear: both" />แท็กทุกอันที่ทิ้งขยะไว้รอบ ๆ มาร์กอัพ

เรากำลังพยายามแก้ไขปัญหาอะไร

มีข้อควรพิจารณาที่สำคัญสองประการเมื่อสิ่งของลอย:

1. ที่มีลูกหลานลอย ซึ่งหมายความว่าองค์ประกอบที่เป็นปัญหาทำให้ตัวเองสูงพอที่จะห่อหุ้มลูกหลานที่ลอยอยู่ทั้งหมด (พวกเขาไม่ออกไปข้างนอก)

   

2. ฉนวนลูกหลานจากภายนอกลอย ซึ่งหมายความว่าลูกหลานที่อยู่ภายในองค์ประกอบจะสามารถใช้งานclear: bothได้และไม่ควรมีการโต้ตอบกับลอยนอกองค์ประกอบ

   

บล็อกบริบทการจัดรูปแบบ

มีเพียงวิธีเดียวในการทำทั้งสองอย่าง และนั่นคือการสร้างใหม่บริบทการจัดรูปแบบบล็อก องค์ประกอบที่สร้างบริบทการจัดรูปแบบบล็อกเป็นรูปสี่เหลี่ยมผืนผ้าหุ้มฉนวนที่ลอยมีปฏิสัมพันธ์ซึ่งกันและกัน บริบทการจัดรูปแบบบล็อกจะสูงพอที่จะตัดการสืบทอดแบบลอยตัวด้วยสายตาและไม่มีการลอยตัวใด ๆ นอกบริบทการจัดรูปแบบบล็อกอาจโต้ตอบกับองค์ประกอบภายใน ฉนวนสองทางนี้เป็นสิ่งที่คุณต้องการอย่างแท้จริง ใน IE แนวคิดเดียวกันนี้เรียกว่าhaslayoutzoom: 1ซึ่งสามารถตั้งค่าผ่านทาง

มีหลายวิธีที่จะสร้างบล็อกการจัดรูปแบบบริบทมี แต่การแก้ปัญหาผมขอแนะนำให้เป็นด้วยdisplay: inline-block width: 100%(แน่นอนว่ายังมีคำเตือนตามปกติกับการใช้width: 100%เพื่อให้การใช้งานbox-sizing: border-boxหรือวางpadding, marginและborderในองค์ประกอบที่แตกต่างกัน.)

ทางออกที่แข็งแกร่งที่สุด

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

ก่อนอื่นโครงสร้างมาร์กอัป

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

และตอนนี้ CSS

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

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

ไปที่JS Binเพื่อเล่นกับโค้ดและดูว่าโซลูชันนี้สร้างจากพื้นดินอย่างไร

วิธีการแก้ไขข้อผิดพลาดแบบดั้งเดิมถือว่าเป็นอันตราย

ปัญหากับแบบดั้งเดิมclearfix การแก้ปัญหาคือการที่พวกเขาใช้สองแนวคิดการแสดงผลที่แตกต่างกันเพื่อให้บรรลุเป้าหมายเดียวกันสำหรับ IE และคนอื่น ๆ ใน IE พวกเขาใช้ hasLayout เพื่อสร้างบริบทการจัดรูปแบบบล็อกใหม่ แต่สำหรับคนอื่น ๆ พวกเขาใช้กล่องที่สร้างขึ้น ( :after) ด้วยclear: bothซึ่งไม่ได้สร้างบริบทการจัดรูปแบบบล็อกใหม่ ซึ่งหมายความว่าสิ่งต่าง ๆ จะไม่ทำงานเหมือนกันในทุกสถานการณ์ สำหรับคำอธิบายว่าทำไมนี้ไม่ดีให้ดูทุกสิ่งที่คุณรู้เกี่ยวกับ Clearfix ที่ผิด

มาตรฐานใหม่ตามที่ใช้โดยInuit.cssและBourbon - สองเฟรมเวิร์ก CSS / Sass ที่ใช้กันอย่างแพร่หลายและได้รับการดูแลเป็นอย่างดี:

.btcf:after {
    content:"";
    display:block;
    clear:both;
}

หมายเหตุ

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

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

clearfix นี้ได้รับการประกาศและอธิบายโดย Thierry Koblentzในเดือนกรกฎาคม 2012 มันหายน้ำหนักไม่จำเป็นออกจากนิโคลัสกัลลาเกอร์ 2011 ไมโคร ในกระบวนการมันจะเพิ่มองค์ประกอบหลอกสำหรับการใช้งานของคุณเอง สิ่งนี้ได้รับการปรับปรุงให้ใช้งานได้display: blockมากกว่าdisplay: table(ให้เครดิตกับ Thierry Koblentz อีกครั้ง)

ฉันแนะนำให้ใช้สิ่งต่อไปนี้ซึ่งนำมาจากhttp://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

คุณสมบัติโอเวอร์โฟลว์สามารถใช้เพื่อเคลียร์ทุ่นโดยไม่ต้องทำการมาร์คเพิ่มเติม:

.container { overflow: hidden; }

ใช้งานได้กับเบราว์เซอร์ทั้งหมดยกเว้น IE6 ซึ่งสิ่งที่คุณต้องทำคือเปิดใช้ hasLayout (ซูมเป็นวิธีที่ฉันต้องการ):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

ฉันพบข้อบกพร่องในวิธีการ CLEARFIX อย่างเป็นทางการ: DOT ไม่มีขนาดตัวอักษร และถ้าคุณตั้งค่าheight = 0และองค์ประกอบแรกใน DOM-Tree ของคุณมีคลาส "clearfix" คุณจะมีระยะขอบที่ด้านล่างของหน้า 12px :)

คุณต้องแก้ไขมันดังนี้:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

ตอนนี้เป็นส่วนหนึ่งของ YAML-Layout ... ลองดูสิ - มันน่าสนใจมาก! http://www.yaml.de/en/home.html

นี่เป็นวิธีที่ค่อนข้างเป็นระเบียบ:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

เป็นที่ทราบกันดีว่าทำงานใน Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

การรวมถึง: ก่อนตัวเลือกไม่จำเป็นต้องล้างข้อมูลลอย แต่ป้องกันไม่ให้ขอบด้านบนยุบลงในเบราว์เซอร์สมัยใหม่ สิ่งนี้ทำให้มั่นใจได้ว่ามีความสอดคล้องทางภาพกับ IE 6/7 เมื่อใช้การซูม: 1

จากhttp://nicolasgallagher.com/micro-clearfix-hack/

Clearfix จาก bootstrap:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

ฉันแค่ใช้: -

.clear:after{
  clear: both;
  content: "";
  display: block;
}

ทำงานได้ดีที่สุดและเข้ากันได้กับ IE8 + :)

เนื่องจากคำตอบจำนวนมากฉันไม่ได้โพสต์ อย่างไรก็ตามวิธีนี้อาจช่วยใครซักคนเพราะมันช่วยฉันได้

หลีกเลี่ยงการลอยตัวเมื่อทำได้

มันคุ้มค่าที่จะพูดถึงฉันหลีกเลี่ยงการลอยเหมือนอีโบลา มีหลายเหตุผลและฉันไม่ได้อยู่คนเดียว อ่านคำตอบ Rikudo เกี่ยวกับสิ่งที่ชัดเจนและคุณจะเห็นสิ่งที่ฉันหมายถึง ในคำพูดของเขา:...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

มีตัวเลือกที่ดี (และบางครั้งก็ดีกว่า) อื่น ๆ นอกเหนือจากแบบลอย เมื่อเทคโนโลยีก้าวหน้าและพัฒนาขึ้นflexbox (และวิธีการอื่น ๆ ) จะถูกนำไปใช้อย่างกว้างขวางและการลอยตัวจะกลายเป็นเพียงความจำที่ไม่ดี อาจเป็น CSS4?

ลอยซุกซนและล้มเหลวเคลียร์

ก่อนอื่นบางครั้งคุณอาจคิดว่าคุณปลอดภัยจากการลอยตัวจนกว่าผู้ช่วยชีวิตของคุณจะถูกเจาะและการไหล html ของคุณจะเริ่มจม:

ใน codepen http://codepen.io/omarjuvera/pen/jEXByaด้านล่างการฝึกล้างทุ่นด้วย<div classs="clear"></div>(หรือองค์ประกอบอื่น ๆ ) เป็นเรื่องปกติ แต่ขมวดคิ้วและต่อต้านความหมาย

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

อย่างไรก็ตามเมื่อคุณคิดว่าการล่องเรือของคุณคุ้มค่า ... บูม! เมื่อขนาดหน้าจอเล็กลงและเล็กลงคุณจะเห็นพฤติกรรมแปลก ๆ เหมือนกราฟิกด้านล่าง ( http://codepen.io/omarjuvera/pen/jEXByaเดียวกัน):

ทำไมคุณต้องแคร์ ฉันไม่แน่ใจว่าตัวเลขที่แน่นอน แต่ประมาณ 80% (หรือมากกว่า) ของอุปกรณ์ที่ใช้เป็นอุปกรณ์มือถือที่มีหน้าจอขนาดเล็ก คอมพิวเตอร์เดสก์ท็อป / แล็ปท็อปไม่ได้เป็นราชาอีกต่อไป

มันไม่ได้จบแค่นั้น

นี่ไม่ใช่ปัญหาเดียวของโฟลต มีเป็นจำนวนมาก all you have to do is to place your floats in a containerแต่ในตัวอย่างนี้บางคนอาจจะบอกว่า แต่อย่างที่คุณเห็นในcodepenและกราฟิคนั่นไม่ใช่กรณี เห็นได้ชัดว่ามันทำให้สิ่งเลวร้ายที่สุด:

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

สำหรับผลลัพธ์หรือไม่

มันเหมือนกัน!

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

CSS Clearfix เพื่อช่วยเหลือ

CSS ที่เรียบง่ายและปรับเปลี่ยนได้นี้เป็นความงามและ "ผู้ช่วยให้รอด":

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

แค่นั้นแหละ! มันใช้งานได้โดยไม่ผิดความหมายและฉันพูดถึงมันใช้งานได้หรือ :

จากตัวอย่างเดียวกัน ... HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

ตอนนี้เราไม่ต้องการ<div classs="clear"></div> <!-- Acts as a wall -->และทำให้ตำรวจความหมายมีความสุขอีกต่อไป สิ่งนี้ไม่ได้เป็นประโยชน์เพียงอย่างเดียว clearfix นี้ตอบสนองทุกขนาดหน้าจอโดยไม่ต้องใช้@mediaในรูปแบบที่ง่ายที่สุด กล่าวอีกนัยหนึ่งมันจะเก็บภาชนะลอยของคุณในการตรวจสอบและป้องกันน้ำท่วม สุดท้ายให้การสนับสนุนเบราว์เซอร์เก่าทั้งหมดใน karate chop ขนาดเล็กหนึ่งอัน =)

นี่คือ clearfix อีกครั้ง

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

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

ตรงไปตรงมา; โซลูชันทั้งหมดดูเหมือนจะเป็นแฮ็กเพื่อแก้ไขข้อผิดพลาดในการแสดงผล ... ฉันผิดหรือเปล่า

ฉันพบว่า<br clear="all" />เป็นวิธีที่ง่ายที่สุดง่ายที่สุด การเห็นclass="clearfix"ทุกที่ไม่สามารถทำให้ประสาทสัมผัสอ่อนไหวของคนที่คัดค้านองค์ประกอบมาร์กอัปที่ไม่เกี่ยวข้องได้ใช่ไหม คุณแค่ทาสีปัญหาบนผืนผ้าใบอื่น

ฉันยังใช้display: hiddenวิธีแก้ปัญหาซึ่งยอดเยี่ยมและไม่ต้องการการประกาศคลาสเพิ่มเติมหรือมาร์กอัป html ... แต่บางครั้งคุณจำเป็นต้องมีองค์ประกอบเพื่อล้นคอนเทนเนอร์เช่นเช่น ริบบิ้นและผ้าคาดเอวสวย ๆ

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

ฉันได้ลองวิธีแก้ปัญหาทั้งหมดแล้วส่วนต่างที่ใหญ่จะถูกเพิ่มเข้าไปใน<html>องค์ประกอบโดยอัตโนมัติเมื่อฉันใช้รหัสด้านล่าง:

.clearfix:after {   
    visibility: hidden;   
    display: block;   
    content: ".";   
    clear: both;   
    height: 0;
}

ในที่สุดฉันแก้ไขปัญหาระยะขอบโดยเพิ่มfont-size: 0;CSS ด้านบน

ด้วย SASS clearfix คือ:

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

และมันถูกใช้เช่น:

.container {
    @include clearfix;
}

ถ้าคุณต้องการ clearfix ใหม่:

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

ด้วย LESS ( http://lesscss.org/ ) เราสามารถสร้างผู้ช่วย clearfix ที่มีประโยชน์:

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

จากนั้นใช้กับภาชนะที่มีปัญหาตัวอย่างเช่น

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

ใช้overflow:hidden/ autoและความสูงสำหรับ ie6 จะพอเพียงถ้าภาชนะลอยตัวมีองค์ประกอบหลัก

มีหนึ่งใน #test ที่สามารถใช้งานได้สำหรับ HTML ที่ระบุด้านล่างเพื่อล้างข้อมูลลอย

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

ในกรณีที่สิ่งนี้ปฏิเสธที่จะทำงานกับ ie6 เพียงแค่ลอยพาเรนต์เพื่อเคลียร์ทุ่น

#test {
  float: left; // using float to clear float
  width: 99%;
}

ยังไม่เคยต้องการการล้างอื่น ๆ อาจเป็นวิธีที่ฉันเขียน HTML

ดูเหมือนว่าค่าการแสดงผลใหม่จะเป็นงานในหนึ่งบรรทัด

display: flow-root;

จากข้อมูลจำเพาะ W3: "องค์ประกอบสร้างกล่องคอนเทนเนอร์ของบล็อกและวางเนื้อหาโดยใช้เค้าโครงเลย์เอาต์มันจะสร้างบริบทการจัดรูปแบบบล็อกใหม่สำหรับเนื้อหาเสมอ"

ข้อมูล: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※ดังที่แสดงในลิงค์ด้านบนปัจจุบันการสนับสนุนมี จำกัด ดังนั้นการสนับสนุนทางเลือกด้านล่างอาจใช้งานได้: https://github.com/fliptheweb/postcss-flow-root

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

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

บทความนี้กล่าวถึงทริกเกอร์บางอย่างที่คุณสามารถใช้: บล็อกการจัดรูปแบบบริบท

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

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.cleaner {
  clear: both;
}

โดยปกติคุณจะต้องทำอะไรบางอย่างดังต่อไปนี้:

<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->

ด้วย clearfix คุณจะต้อง

<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->

ทำไมเพียงแค่พยายามใช้ css hack เพื่อทำงาน HTML 1 บรรทัด และทำไมไม่ใช้ semantic html tu put break เพื่อกลับไปที่บรรทัด?

สำหรับฉันดีกว่าที่จะใช้จริง:

<br style="clear:both" />

และถ้าคุณไม่ต้องการสไตล์ใด ๆ ใน html ของคุณคุณต้องใช้คลาสสำหรับการหยุดพักและใส่.clear { clear:both; }ใน CSS ของคุณ

ข้อดีของสิ่งนี้:

• ใช้ความหมายของ html เพื่อกลับไปที่บรรทัด
• หากไม่มีการโหลด CSS มันจะทำงาน
• ไม่จำเป็นต้องใช้โค้ด CSS และการแฮกเพิ่มเติม
• ไม่จำเป็นต้องจำลอง br ด้วย CSS มันมีอยู่แล้วใน HTML

สมมติว่าคุณใช้โครงสร้าง HTML นี้:

<div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

นี่คือ CSS ที่ฉันจะใช้:

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

ฉันใช้ชุดนี้ตลอดเวลาและใช้งานได้ดีสำหรับฉันแม้แต่ใน IE6

แตกต่างจาก clearfix อื่น ๆ นี่คือแบบปลายเปิดที่ไม่มีคอนเทนเนอร์

clearfixes อื่น ๆ ทั้งต้องมีองค์ประกอบที่ลอยอยู่ในภาชนะที่ทำเครื่องหมายดีออกหรือต้องการพิเศษ, <div>ความหมายที่ว่างเปล่า ในทางกลับกันการแยกเนื้อหาและมาร์กอัปที่ชัดเจนต้องการโซลูชัน CSS ที่เข้มงวดสำหรับปัญหานี้

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

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

นี่คือเหตุผลที่ฉันใช้ clearfix ต่อไปนี้กับหัวเรื่องใหม่:

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

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

นอกจากนี้ยังป้องกันการแทรกแซงด้วยตนเองเมื่อสร้างPDFจากเว็บไซต์โดยอัตโนมัติ นี่เป็นหน้าตัวอย่าง

ฉันใช้micro-clearfix เสมอ :

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

ในCascade Frameworkฉันยังใช้มันเป็นค่าเริ่มต้นในองค์ประกอบระดับบล็อก IMO ซึ่งการใช้งานตามค่าเริ่มต้นในองค์ประกอบระดับบล็อกจะทำให้องค์ประกอบระดับบล็อกมีพฤติกรรมที่ใช้งานง่ายกว่าพฤติกรรมแบบดั้งเดิม มันทำให้ฉันง่ายขึ้นมากในการเพิ่มการรองรับเบราว์เซอร์รุ่นเก่าลงใน Cascade Framework (ซึ่งรองรับ IE6-8 เช่นเดียวกับเบราว์เซอร์ที่ทันสมัย)

คุณสามารถใส่สิ่งนี้ลงใน CSS ของคุณ:

.cb:after{
  visibility: hidden;
  display: block;
  content: ".";
  clear: both;
  height: 0;
}

*:first-child+html .cb{zoom: 1} /* for IE7 */

และเพิ่มคลาส "cb" ลงใน div parent ของคุณ:

<div id="container" class="cb">

คุณไม่จำเป็นต้องเพิ่มอะไรอีกในรหัสต้นฉบับของคุณ ...

คุณได้ลองสิ่งนี้แล้ว:

<div style="clear:both;"/>

ฉันไม่ได้มีปัญหากับวิธีนี้

My Favorite Method คือการสร้างคลาส clearfix ในเอกสาร css / scss ของฉันดังนี้

.clearfix{
    clear:both
}

และเรียกมันในเอกสาร html ของฉันตามที่แสดงด้านล่าง

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>

มันเป็น clearfix ง่าย ๆ เพื่อล้างปัญหาโดยเมื่อเราใช้คุณสมบัติ float ภายในองค์ประกอบ div ถ้าเราใช้สององค์ประกอบ div หนึ่งเป็น float: left; และอีกอันหนึ่งลอย: ใช่; เราสามารถใช้ clearfix สำหรับ parent ของอิลิเมนต์ div ทั้งสอง หากเราปฏิเสธที่จะใช้ช่องว่างที่ไม่จำเป็นของ clearfix เติมเนื้อหาด้านล่างและโครงสร้างของไซต์จะเสียหาย