Several solutions for the child div not supporting the parent div

Several solutions for the child div not supporting the parent div

 

When the child div cannot support the parent div:

<style>
.example{
  background: #008000;
  width: 400px;
  margin: 10px;
  padding: 10px;
}
.example .childrenDiv{
  float: left;
  height: 100px;
  width: 100px;
  word-break: break-all;
  word-wrap: break-word;
}
</style>
<!--Example-->
<div class="example">
    <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div>
    <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div>
</div>

 

Show results:

 

 

Solution:

（一）：加<div style="clear:both;"></div>

Code example:

<!--Method 1-->
<div class="example">
    <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div>
    <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div>
    <!--Solution-->
    <div style="clear: both;"></div>
</div>

 

Show results:

analyze:

The parent div is used as the outer container, and the child div is set with the float style, then the outer container div cannot be stretched because there is no clear inside, that is, the inner div loses the styles of clear:both and display:block because of float:left.

 

(2): Spread the parent container through pseudo-elements

Code example:

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

<!--Method 2-->
<div class="clearfix example">
    <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div>
    <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div>
</div>

 Show results:

 

 

analyze:

1. The first method is not recommended. First, there is a meaningless div in the code; secondly, when using dojo to do Drag&Drop, since this div is a child node of the parent container div, if this node is moved, It will cause typographical errors, and if you want to move the child div after this div, it will be forced to wrap because of clear:both.

2. Principle of method 2: The after pseudo-object will add the content in the content at the end of the element to which clearfix is ​​applied, add a "." here, and set its display to block, height to 0, and clear to Both, visibility is set to hidden, that is, the container is opened.

3. Because Windows IE does not support the above method, to display it perfectly on IE, you must add some hacks specially set for IE after the css definition of clearfix, namely:

/* Hides from IE-mac \*/
*html.clearfix{height: 1%;}
/*end hide from IE-mac*/

 

Because of the transfer character "\", Mac IE browser will ignore this hack, but window IE will not, it will apply *html.clearfix{height:1%;} to achieve the purpose of opening the div container (seems like Mac IE There is no way to solve this problem, regardless of the small number of users, Safari support is enough O(∩_∩)O haha~).

 

(3) Add an attribute to the parent container: overflow: hidden

Code example:

<!--Method 3-->
<div class="example" style="overflow: hidden;">
    <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div>
    <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div>
</div>

 

Show results:

 

 

(4) Add an attribute to the parent container: display: table

Code example:

<!--Method 4-->
<div class="example" style="display: table;">
    <div class="childrenDiv" style="background: #e9b216;">tatatattttaatatatatatatata</div>
    <div class="childrenDiv" style="background: #df4744;">tatatattttaatatatatatatata</div>
</div>

 

Show results: