How to solve the problem that the parent div cannot be opened automatically after the child div is set to float.

The content shared with you in this article is about setting float on the child div, which will cause the parent div to be unable to open automatically. The content is very detailed. Next, let’s take a look at the specific content. I hope it can Help everyone.

Reason: The inner p loses the styles of clear:both and display:block after float:left, so the outer p will not be opened.

The following are several solutions (assuming the class of parent p is "container"):

• Method 1. Use pseudo-class

container::after{
    display: block;
    height:0;
    content: '';
    clear: both;
}
container{
    display: inline-block; /*第一种撑开办法，底下会有部分被遮到，所以添加这行，就完美了*/
}

• Method 2. The principle of not spreading is that the overflow is not visible, so just add overflow:auto; to the parent p. For IE, use _height:1%;

container{
    overflow: auto;/*让主要内容区随内容自动撑开*/
    overflow-y:hidden;/*把出现的滚动条隐藏，但是底下会被遮到一点，不完美*/
     _height:1%;/*对IE的hack*/
}

• Method 3. You can add a sub-p at the end to clear the float: 5394d62b37c0d1016baca90bf99fbfbf94b3e26ee717c64999d7867364b1b4a3
  Set style.clear{clear:both; font-size:0; height:1%;}

• Method 4. You can set the height of the parent p (That is, manual expansion is inflexible);

• Method 5. Directly set the parent pdisplay: inline-block; This will also automatically expand

• Method 6. Directly set the sub-p display: inline-block; It can also be opened automatically, but the typesetting problem needs to be studied and studied

• Method 7. I also found a method on the Internet to add attributes to the parent p: display:table;

• Method 8. Float the child p I can’t trap you? OK, I let the parent p also float: parent p setting float: left; can also be

Related recommendations:

tinymce and prism implement highlighted code and Chinese configuration method process

Introduction to how to dynamically generate html elements and add attributes to elements (code attached)

The above is the detailed content of How to solve the problem that the parent div cannot be opened automatically after the child div is set to float.. For more information, please follow other related articles on the PHP Chinese website!