210

ฉันต้องการถามว่าความสูงและลอยทำงานอย่างไร ฉันมี div ภายนอกและ div ภายในที่มีเนื้อหาอยู่ ความสูงของมันอาจแตกต่างกันไปขึ้นอยู่กับเนื้อหาของ div ภายใน แต่ดูเหมือนว่า div ภายในของฉันจะล้น div ภายนอก อะไรจะเป็นวิธีที่เหมาะสมที่จะทำ?

 <html>
    <body>
        <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
    	    <div style="width:500px; height:200px; background-color:black; float:right"></div>
        </div>
    </body>
</html>

html css css-float

— Boy Pasmo
แหล่งที่มา

การทำซ้ำที่เป็นไปได้ของCSS: ความสูงขั้นต่ำไม่ทำงานหรือCSS: ปัญหาความสูง Div บนชุดการลอย

— Shauna

ดีและขอบคุณมาก!

— Bassam Alugili

เป็นไปได้ซ้ำของสิ่งของที่ลอยอยู่ใน div, ลอยอยู่นอก div ทำไม?

— Oriol

581

องค์ประกอบลอยไม่เพิ่มความสูงขององค์ประกอบภาชนะและด้วยเหตุนี้ถ้าคุณไม่ล้างพวกเขาความสูงภาชนะจะไม่เพิ่ม ...

ฉันจะแสดงให้คุณเห็น:

ป้อนคำอธิบายรูปภาพที่นี่

คำอธิบายเพิ่มเติม:

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        besides the top div. Why? Because of the top div 
                                        is floated left, making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div from floating beside the top ones, 
       we use `clear: both;`. This is like a wall, so now none of the div's 
       will be floated after this point. The container height will now also include the 
       height of these floated divs -->
  <div></div>
</div>

คุณยังสามารถเพิ่มoverflow: hidden;องค์ประกอบของคอนเทนเนอร์ได้ แต่ฉันขอแนะนำให้คุณใช้clear: both;แทน

นอกจากนี้หากคุณต้องการล้างองค์ประกอบด้วยตนเองคุณสามารถใช้

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

CSS Float ทำงานอย่างไร?

อะไรคือสิ่งที่ลอยและสิ่งที่จะทำอย่างไร

floatคุณสมบัติจะเข้าใจผิดโดยเริ่มต้นมากที่สุด ทีนี้ทำอะไรกันแน่float? ในขั้นต้นfloatคุณสมบัติได้รับการแนะนำให้ไหลภาพรอบข้อความซึ่งจะลอยหรือleft นี่เป็นอีกคำอธิบายโดย @Madara Uchicharight
ดังนั้นการใช้floatคุณสมบัตินี้ในการวางกล่องแบบเคียงข้างกันผิดหรือไม่? คำตอบคือไม่ ; ไม่มีปัญหาหากคุณใช้floatคุณสมบัตินี้เพื่อตั้งค่ากล่องแบบเคียงข้างกัน
องค์ประกอบแบบลอยตัวinlineหรือblockระดับจะทำให้องค์ประกอบทำงานเหมือนinline-blockองค์ประกอบ
การสาธิต
หากคุณลอยองค์ประกอบleftหรือrightที่widthขององค์ประกอบจะถูก จำกัด ให้เนื้อหามันถือเว้นแต่widthจะกำหนดไว้อย่างชัดเจน ...
คุณไม่สามารถองค์ประกอบfloat centerนี่เป็นปัญหาที่ใหญ่ที่สุดที่ฉันเคยเห็นกับผู้เริ่มต้นใช้~~float: center;~~งานซึ่งไม่คุ้มค่าสำหรับfloatอสังหาริมทรัพย์ floatโดยทั่วไปจะใช้เพื่อfloat/ ย้ายเนื้อหาไปทางซ้ายหรือไปทางขวาสุด มีเพียง แต่เป็นสี่ค่าที่ถูกต้องสำหรับfloatเช่นคุณสมบัติleft, right, none(เริ่มต้น) inheritและ
องค์ประกอบหลักยุบเมื่อมีองค์ประกอบลูกลอยเพื่อป้องกันสิ่งนี้เราใช้clear: both;คุณสมบัติเพื่อล้างองค์ประกอบลอยทั้งสองด้านซึ่งจะป้องกันการยุบตัวขององค์ประกอบหลัก สำหรับข้อมูลเพิ่มเติมคุณสามารถดูคำตอบอื่นของฉันที่นี่
(สำคัญ)ลองคิดดูสิว่าเรามีองค์ประกอบอะไรหลายอย่าง เมื่อเราใช้float: left;หรือfloat: right;องค์ประกอบย้ายเหนือกองโดยหนึ่ง ดังนั้นองค์ประกอบในโฟลว์เอกสารปกติจะซ่อนอยู่หลังองค์ประกอบลอยเนื่องจากอยู่ในระดับสแต็กเหนือองค์ประกอบลอยปกติ (โปรดอย่าเชื่อมโยงสิ่งนี้กับz-indexสิ่งที่แตกต่างอย่างสิ้นเชิง)

ยกตัวอย่างเพื่ออธิบายวิธีการทำงานของ CSS โดยสมมติว่าเราต้องการเลย์เอาต์ 2 คอลัมน์แบบง่ายที่มีส่วนหัวส่วนท้ายและ 2 คอลัมน์ดังนั้นนี่คือสิ่งที่พิมพ์เขียวดูเหมือน ...

ป้อนคำอธิบายรูปภาพที่นี่

ในตัวอย่างข้างต้นเราจะลอยเฉพาะกล่องสีแดงทั้งที่คุณสามารถfloatทั้งไปที่leftหรือคุณสามารถfloatไปที่leftและอื่น ๆrightเช่นกันขึ้นอยู่กับรูปแบบถ้ามันเป็น 3 คอลัมน์คุณอาจfloat2 คอลัมน์ไปleftที่อื่น หนึ่งไปrightจึงขึ้นอยู่แม้ว่าในตัวอย่างนี้เรามีรูปแบบที่เรียบง่ายคอลัมน์ 2 เพื่อจะfloatหนึ่งไปleftและอื่น ๆ rightไป

มาร์กอัปและสไตล์สำหรับการสร้างโครงร่างอธิบายเพิ่มเติม ...

<div class="main_wrap">
    <header>Header</header>
    <div class="wrapper clear">
        <div class="floated_left">
            This<br />
            is<br />
            just<br />
            a<br />
            left<br />
            floated<br />
            column<br />
        </div>
        <div class="floated_right">
            This<br />
            is<br />
            just<br />
            a<br />
            right<br />
            floated<br />
            column<br />
        </div>
    </div>
    <footer>Footer</footer>
</div>

* {
    -moz-box-sizing: border-box;       /* Just for demo purpose */
    -webkkit-box-sizing: border-box;   /* Just for demo purpose */
    box-sizing: border-box;            /* Just for demo purpose */
    margin: 0;
    padding: 0;
}

.main_wrap {
    margin: 20px;
    border: 3px solid black;
    width: 520px;
}

header, footer {
    height: 50px;
    border: 3px solid silver;
    text-align: center;
    line-height: 50px;
}

.wrapper {
    border: 3px solid green;
}

.floated_left {
    float: left;
    width: 200px;
    border: 3px solid red;
}

.floated_right {
    float: right;
    width: 300px;
    border: 3px solid red;
}

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

ไปทีละขั้นตอนกับเค้าโครงและดูว่า float ทำงานอย่างไร ..

ครั้งแรกของทั้งหมดที่เราใช้กระดาษห่อองค์ประกอบหลักคุณสามารถเพียงแค่คิดว่ามันเป็นวิวพอร์ตของคุณแล้วเราจะใช้headerและกำหนดheightของ50pxดังนั้นไม่มีอะไรแฟนซีมี เป็นเพียงองค์ประกอบระดับบล็อกที่ไม่ลอยตามปกติซึ่งจะใช้100%พื้นที่ในแนวนอนเว้นแต่ว่ามันจะลอยหรือเรากำหนดinline-blockให้มัน

ค่าแรกที่ถูกต้องfloatคือleftในตัวอย่างของเราเราใช้float: left;สำหรับ.floated_leftดังนั้นเราตั้งใจจะลอยบล็อกไปยังleftองค์ประกอบของภาชนะของเรา

คอลัมน์ลอยไปทางซ้าย

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

เมื่อมาถึงคอลัมน์ที่สองให้มันเป็นคอลัมน์floatนี้right

คอลัมน์อื่นลอยไปทางขวา

ที่นี่เรามี300pxคอลัมน์กว้าง ๆ ซึ่งเราfloatไปที่rightซึ่งจะนั่งข้างคอลัมน์แรกขณะที่มันลอยไปที่leftและเนื่องจากมันลอยไปที่leftมันสร้างรางน้ำว่างเปล่าให้กับrightและเนื่องจากมีพื้นที่ว่างเพียงพอบนrightของเราrightองค์ประกอบลอยนั่งอย่างสมบูรณ์แบบข้างleftหนึ่ง

ถึงกระนั้นองค์ประกอบหลักก็ถูกยุบเอาล่ะมาแก้ไขกันเถอะ มีหลายวิธีในการป้องกันองค์ประกอบหลักไม่ให้ยุบ

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

เพิ่ม<div style="clear: both;"></div>ก่อน.wrapper divจบเช่น

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

การสาธิต

ดีที่แก้ไขได้ดีมากไม่มีผู้ปกครองยุบอีกต่อไป แต่มันเพิ่มมาร์กอัปที่ไม่จำเป็นใน DOM ดังนั้นบางคนแนะนำให้ใช้overflow: hidden;ในองค์ประกอบผู้ปกครองที่ถือองค์ประกอบเด็กลอยซึ่งทำงานตามที่ตั้งใจไว้

ใช้overflow: hidden;บน.wrapper

.wrapper {
    border: 3px solid green;
    overflow: hidden;
}

การสาธิต

สิ่งนั้นช่วยเราให้เป็นองค์ประกอบทุกครั้งที่เราต้องการclear floatแต่เมื่อฉันทดสอบกรณีต่าง ๆ เกี่ยวกับสิ่งนี้มันก็ล้มเหลวในbox-shadowองค์ประกอบหนึ่งซึ่งใช้กับองค์ประกอบลูก

การสาธิต (ไม่เห็นเงาทั้ง 4 ด้านoverflow: hidden;ทำให้เกิดปัญหานี้)

แล้วตอนนี้ล่ะ? บันทึกองค์ประกอบไม่overflow: hidden;ต้องไปหาแฮ็คแก้ไขที่ชัดเจนใช้ตัวอย่างข้อมูลด้านล่างใน CSS ของคุณและเช่นเดียวกับที่คุณใช้overflow: hidden;สำหรับองค์ประกอบหลักโทรclassไปด้านล่างในองค์ประกอบหลักเพื่อล้างตัวเอง

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

<div class="wrapper clear">
    <!-- Floated Elements -->
</div>

การสาธิต

ที่นี่เงาทำงานตามที่ตั้งใจไว้และมันจะทำการล้างองค์ประกอบหลักซึ่งป้องกันการยุบ

และสุดท้ายเราใช้ส่วนท้ายหลังจากเราclearลอยองค์ประกอบ

การสาธิต

เมื่อใดจะfloat: none;ใช้ต่อไปตามที่เป็นค่าเริ่มต้นดังนั้นการใช้งานใด ๆ ที่จะประกาศfloat: none;?

ขึ้นอยู่กับว่าถ้าคุณต้องการการออกแบบที่ตอบสนองคุณจะใช้ค่านี้หลายครั้งเมื่อคุณต้องการให้องค์ประกอบที่ลอยอยู่ของคุณแสดงผลที่ด้านล่างด้วยความละเอียดที่แน่นอน สำหรับfloat: none;คุณสมบัตินั้นมีบทบาทสำคัญที่นั่น

ตัวอย่างโลกแห่งความจริงfloatมีประโยชน์เพียงใด

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

การสาธิต (โดยไม่ลอยimg)

ตัวอย่าง 2 (imgลอยไปที่left)

ใช้floatสำหรับสร้างเมนูแนวนอน - สาธิต

ลอยองค์ประกอบที่สองด้วยหรือใช้ "ระยะขอบ"

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

สมมติว่าถ้าเราลบfloat: right;จากของเรา.floated_right classที่divจะแสดงผลจากการที่รุนแรงleftที่มันไม่ได้ลอย

การสาธิต

ดังนั้นในกรณีนี้คุณสามารถfloatไปที่leftเช่นกัน

หรือ

คุณสามารถใช้margin-leftซึ่งจะเท่ากับขนาดของคอลัมน์ลอยซ้ายคือ200pxกว้าง

— นายเอเลี่ยน
แหล่งที่มา

3

ความจริงที่ว่าโฟลตไม่ได้มีส่วนร่วมกับความสูงของผู้ปกครองระดับบล็อกมีการระบุไว้อย่างชัดเจนในข้อมูลจำเพาะ: w3.org/TR/CSS21/visudet.html#normal-blockเหตุผลที่การเพิ่มเคลียร์ฟรอยด์ทำงานเนื่องจาก 1) clearfix คือ (ปกติ) ใน flow ปกติ 2) clearing floats ต้องการให้ clearfix วางที่ด้านล่างสุดของโฟลต 3) คอนเทนเนอร์ต้องยืดออกเพื่อให้เคลียร์นั้น

— BoltClock

@BoltClock จะดีกว่าถ้าคุณย้อนการแก้ไขชื่อเรื่องซึ่งจะส่งผลกระทบอย่างรุนแรงต่อ seo สำหรับผู้ใช้ที่ค้นหาว่า float ทำงานอย่างไร .. คุณสามารถเขียนคำเหล่านั้นบน google และตรวจสอบ .. มิฉะนั้นคำตอบที่ยอมรับนี้ไม่มีประโยชน์ถ้าผู้คน ไม่สามารถค้นหาสิ่งที่ต้องการได้

— นายเอเลี่ยนที่

"CSS float ทำงานอย่างไร" เป็นชื่อวงกว้างมากและมันยังทำให้ผู้คนเข้าใจผิดในการลงคะแนนให้ปิดคำถามโฟลตใด ๆในฐานะคู่หูของคำถามนี้ คำถามที่นี่ครอบคลุมเพียงหนึ่งด้าน: การห่อภาชนะ (หรือไม่ห่อ) ลอย

— BoltClock

@BoltClock Anyways วิชายังคงเหมือนเดิมตามที่อธิบายไว้ในclear: both;แต่ก็ปรับถ้าคุณรู้สึกว่าแก้ไข justifies เพื่อช่วยให้วิธีการที่

— นายคนต่างด้าว

1

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

— Deen John

38

คุณต้องเพิ่มoverflow:autodiv ของผู้ปกครองเพื่อรวม div ที่ลอยอยู่ภายใน:

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

ตัวอย่าง jsFiddle

— j08691
แหล่งที่มา

6

นี่ไม่ใช่วิธีแก้ปัญหาคุณกำลัง hidding เนื้อหาที่ออกไปจากขอบเขตจาก div ภายนอก

— Alejandro Ruiz Arias

@AlejandroRuizArias - อะไรคือสิ่งที่ถูกซ่อนอยู่?

— j08691

3

ในตัวอย่างนี้ไม่มีอะไร แต่ถ้าคุณแนะนำเนื้อหาเพียงพอใน div ภายในใช่

— Alejandro Ruiz Arias

สิ่งนี้ไม่ได้ทำในสิ่งที่ OP ต้องการ: Forked jsfiddle.net/h0ceb5ra

— TecBrat

1

น่ากลัว โซลูชันเดียวที่ฉันกำลังมองหาถ้าทุกอย่างเป็นเรื่องง่ายนั่นก็ไม่จำเป็นต้องลดขนาดลง

— YK

10

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

ภายใต้สถานการณ์ปกติสมมติว่าไม่มีการตั้งค่าความสูงอย่างชัดเจนองค์ประกอบระดับบล็อกเช่น div จะตั้งค่าความสูงตามเนื้อหา ส่วนล่างของ div parent จะขยายออกไปเกินองค์ประกอบสุดท้าย น่าเสียดายที่การลอยองค์ประกอบจะหยุดผู้ปกครองไม่ให้พิจารณาองค์ประกอบลอยเมื่อพิจารณาความสูง ซึ่งหมายความว่าหากองค์ประกอบสุดท้ายของคุณลอยมันจะไม่ "ยืด" ผู้ปกครองในลักษณะเดียวกับองค์ประกอบปกติจะ

การหักบัญชี

มีสองวิธีทั่วไปในการแก้ไขปัญหานี้ ประการแรกคือการเพิ่มองค์ประกอบ "ล้าง"; นั่นคือองค์ประกอบอื่นด้านล่างหนึ่งที่ลอยอยู่ที่จะบังคับให้ผู้ปกครองที่จะยืด ดังนั้นเพิ่ม html ต่อไปนี้เป็นลูกคนสุดท้าย:

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

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

ล้น:

วิธีที่สองซึ่งเป็นที่ต้องการของคนส่วนใหญ่ (ฉันคิดว่า) คือการเปลี่ยน CSS ขององค์ประกอบหลักเพื่อให้การโอเวอร์โฟลว์เป็นอะไรนอกจาก "มองเห็นได้" ดังนั้นการตั้งค่าโอเวอร์โฟลว์เป็น "ซ่อน" จะบังคับให้ผู้ปกครองยืดออกไปด้านล่างของลูกลอย สิ่งนี้จะเกิดขึ้นได้ก็ต่อเมื่อคุณไม่ได้ตั้งค่าความสูงของผู้ปกครองไว้

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

— Maloric
แหล่งที่มา

3

มันเป็นเพราะการลอยของ div เพิ่มoverflow: hiddenในองค์ประกอบภายนอก

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

การสาธิต

— StarX
แหล่งที่มา

3

คุณสับสนว่าเบราว์เซอร์แสดงองค์ประกอบอย่างไรเมื่อมีองค์ประกอบลอยตัว หากองค์ประกอบบล็อกหนึ่งลอย (div ภายในของคุณในกรณีของคุณ) องค์ประกอบบล็อกอื่น ๆ จะไม่สนใจเพราะเบราว์เซอร์ลบองค์ประกอบลอยจากการไหลปกติของหน้าเว็บ จากนั้นเนื่องจาก div divated ถูกลบออกจากโฟลว์ปกติ div ภายนอกจึงถูกเติมเต็มเหมือน div ภายในไม่อยู่ที่นั่น อย่างไรก็ตามองค์ประกอบแบบอินไลน์ (รูปภาพ, ลิงค์, ข้อความ, blackquotes) จะเคารพขอบเขตขององค์ประกอบลอย หากคุณแนะนำข้อความใน div ภายนอกข้อความจะวาง arround de Inner div

กล่าวอีกนัยหนึ่งองค์ประกอบของบล็อก (ส่วนหัวย่อหน้า divs ฯลฯ ) จะไม่สนใจองค์ประกอบลอยและเติมและองค์ประกอบอินไลน์ (รูปภาพลิงก์ข้อความ ฯลฯ ) เคารพขอบเขตขององค์ประกอบลอย

ตัวอย่างซอที่นี่

<body>
    <div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
           floating element
    </div>
    <h1 style="background-color:red;"> this is a big header</h1>
    <p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
        <img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
     </p>

— Alejandro Ruiz Arias
แหล่งที่มา

3

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

— Mr. Alien

2

ลองอันนี้

.parent_div{
    display: flex;
}

— Yusufbek
แหล่งที่มา

1

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

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

นี่คือ CSS ต่อไปนี้:

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

-----------------------หรือ-------------------------- ----

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

นี่คือ CSS ต่อไปนี้:

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }

— Nishant Rana
แหล่งที่มา

ทำไมความสูงขององค์ประกอบคอนเทนเนอร์ไม่เพิ่มขึ้นถ้ามันมีองค์ประกอบลอย

CSS Float ทำงานอย่างไร?

อะไรคือสิ่งที่ลอยและสิ่งที่จะทำอย่างไร

ลอยองค์ประกอบที่สองด้วยหรือใช้ "ระยะขอบ"