ทำให้เด็กมองเห็นได้ภายนอกโอเวอร์โฟลว์: ผู้ปกครองที่ซ่อนอยู่

ใน CSS overflow:hiddenมีการตั้งค่าบนคอนเทนเนอร์หลักเพื่อให้สามารถขยายได้ตามความสูงของลูกที่ลอยอยู่

แต่มันยังมีคุณสมบัติที่น่าสนใจอีกอย่างเมื่อรวมกับmargin: auto...

หากพี่น้องก่อนหน้านี้เป็นองค์ประกอบลอยจริงจะปรากฏขึ้นมาเคียงข้างกัน นั่นคือถ้าพี่น้องเป็นfloat:leftคอนเทนเนอร์ด้วยfloat:none overflow:hiddenจะปรากฏทางด้านขวาของพี่น้องโดยไม่มีการขึ้นบรรทัดใหม่เหมือนกับว่ามันลอยอยู่ในโฟลว์ปกติ หากพี่น้องก่อนหน้านี้เป็นfloat:rightคอนเทนเนอร์จะปรากฏทางด้านซ้ายของพี่น้อง การปรับขนาดคอนเทนเนอร์นี้จะแสดงให้เห็นว่าอยู่กึ่งกลางระหว่างองค์ประกอบลอย บอกว่าถ้าคุณมีพี่น้องสองคนก่อนหน้านี้หนึ่งfloat:leftอื่น ๆfloat:right, ภาชนะที่จะปรากฏเป็นศูนย์กลาง inbetween สอง

นี่คือปัญหา ...

ฉันจะรักษาเค้าโครงประเภทนั้นได้อย่างไรโดยไม่มีการปิดบังเด็ก

Googling ทั่วทั้งเว็บช่วยให้ฉันมีวิธีการclear:bothและขยายคอนเทนเนอร์ ... แต่ฉันไม่พบวิธีอื่นในการรักษาศูนย์กลางเด็กก่อนหน้าซ้าย / ขวา หากคุณสร้างคอนเทนเนอร์คอนเทนเนอร์overflow:visibleนั้นก็จะเพิกเฉยต่อการจัดวางองค์ประกอบที่ลอยอยู่และปรากฏเป็นชั้น ๆ อยู่ด้านบนขององค์ประกอบลอย

ดังนั้นคำถาม :

ฉันต้องมีคอนเทนเนอร์overflow:hiddenเพื่อรักษาเค้าโครง ...

จะทำยังไงให้เด็ก ๆ ไม่สวมหน้ากาก ฉันจำเป็นต้องให้เด็กอยู่ในตำแหน่งที่สัมพันธ์กับผู้ปกครองนอกคอนเทนเนอร์อย่างแน่นอน

หรือ

ฉันจะทำอย่างไรoverflow:visibleเพื่อให้ฉันอย่างสามารถวางตำแหน่งของเด็กที่สัมพันธ์กับผู้ปกครองนอกภาชนะ ... ยังรักษาพี่น้องลอยเหมือนรูปแบบการไหล?

คุณสามารถใช้clearfix"การรักษาเค้าโครง" ในการทำเช่นเดียวกับที่overflow: hiddenทำ

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

เพิ่มclass="clearfix"คลาสให้กับพาเรนต์และลบoverflow: hidden;

คำตอบทั้งสองข้อที่โพสต์ไม่ได้ผลสำหรับฉัน อย่างไรก็ตามการตั้งค่าposition: absoluteสำหรับองค์ประกอบลูกไม่ได้ผล

นี่เป็นคำถามเก่า แต่เจอด้วยตัวเอง

ฉันมีวิธีแก้ปัญหาแบบกึ่ง ๆ ที่ใช้สถานการณ์สำหรับคำถามเดิม ("เด็ก ๆ มองเห็นได้ล้น: ผู้ปกครองที่ซ่อนอยู่")

หาก div ระดับบนสุดไม่จำเป็นต้องอยู่ในตำแหน่ง: สัมพัทธ์เพียงแค่ตั้งค่าสไตล์ลูกเป็น visibility: visible

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

นี่คือตัวอย่างเส็งเคร็งเพียงแค่โพสต์ลงในไฟล์ html เพื่อดู

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

สำหรับคนอื่น ๆ หาก clearfix ไม่สามารถแก้ปัญหานี้ให้คุณได้ให้เพิ่มระยะขอบให้กับพี่น้องที่ไม่มีการลอยซึ่งเท่ากับ / เท่ากับความกว้างของพี่น้องที่ลอยอยู่