当前位置：网站首页>Height collapse caused by floating

Height collapse caused by floating

2022-07-26 22:25:00 【Self cultivation record of waste】

Normal page layout

 <style> *{
       margin:0; padding: 0; } .content{
       width:400px; border:1px solid #000; } .box{
       width:200px; height:200px; background: greenyellow; } </style>

<body>
    <div class="content">
        <div class="box"></div>
    </div>
    <p> Jiku astifen </p>
</body>

Insert picture description here
When the class name is .box The box with floating

<style> *{
       margin:0; padding: 0; } .content{
       width:400px; border:1px solid #000; } .box{
       width:200px; height:200px; background: greenyellow; float: left; } </style>

Insert picture description here
You can see that the page layout is messy , Because the element will leave the document flow after floating

Solution

1 utilize BFC( Add... To the parent element overflow:hidden)

** shortcoming ： The overflow element of the parent element will be hidden , May affect the page display **

 .content{
            width:400px;
            border:1px solid #000;
            overflow: hidden;
            
        }

2 Empty div

The main points of ：
1. Add an empty block level element
2. Clear floating for block level elements , Easy way , Do not manage whether to float left or right , Directly clear all (clear:both)

    <style> *{
       margin:0; padding: 0; } .content{
       width:400px; border:1px solid #000; /* overflow: hidden; */ } .box{
       width:200px; height:200px; background: greenyellow; float: left; } .clear{
       clear: both; } </style>
    
<body>
    <div class="content">
        <div class="box"></div>
        <div class="clear"></div>
    </div>
    <p> Jiku astifen </p>
</body>

3 Using pseudo elements

The main points of ：
1 In fact, and add empty div The principle is the same , The only thing to remember is to turn pseudo elements into block level elements (display:block), Otherwise it will have no effect
2 And don't forget to add the attributes of pseudo elements (content:‘’)

<style> *{
       margin:0; padding: 0; } .content{
       width:400px; border:1px solid #000; /* overflow: hidden; */ } .content::after{
       content: ''; display: block; //  Must be converted to a block element  clear: both; } .box{
       width:200px; height:200px; background: greenyellow; float: left; } /* .clear{ clear: both; } */ </style>

<body>
    <div class="content">
        <div class="box"></div>
        <!-- <div class="clear"></div> -->
    </div>
    <p> Jiku astifen </p>
</body>