How to do FLOAT float causes the parent element collapse

How to do FLOAT float causes the parent element collapse? This issue may be often seen in our daily study or work. I hope that you can give you a deep harvest through this issue. Below is the reference content brought by Xiaobian, let’s take a look!

Float floats caused the solution to the collapse of the parent element to set a height to the parent element. When the last child element is set, set an empty div and use the Clear to clear the floating, the parent element sets Overflow: hidden, The parent element is added atTER Pseudo

When the web is launched, the FLOAT floating attribute is often used, but the child elements under the parent element will cause the parent element to collapse. Next, we will specifically introduce how to solve the problem of floating and cause the parent element collapse, I hope to help everyone


When the parent element gives an element, set floating to the child element. The background color of the parent element will disappear, and when the parent element has a border, it will find that the floating element cannot be opened.

 TUMI cloud  
    TUMI cloud
  • TUMI cloud
  • After floating

TUMI cloud TUMI cloud

TUMI cloud
  • From the above figure, it can be seen that the content of the parent element is not supported after the child element is set. That is to sayAfter the setting is floating, it is not the jurisdiction of the entire document. Then it has the height of the parent element, and the floating does not exist, and the parent element will not have anything in the default (provided not to give The parent element sets the fixed height. If the parent element itself has a fixed height, there will be a collapse
  • parent element collapsed solution:
(1) Add a height to the parent element
The high degree of this method cannot be confirmed, it takes a number of attempts to set

(2) After the last child element adds an empty div, give him a style CLEAR, clear the floating on both sides;


( 4) Parental elements Add After pseudo-class;
.parent: after {content: “” DISPLAY: Block; Clear: Both;}

Thank you for reading! After reading the above, do you have a parent element collapse to Float? I hope that the content of the article will help everyone. If you want to know more about the content, please pay attention to Tumi Yun Industry Information Channel.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment