Three methods that allow the parent element to be highly adaptive when the child element is floating (and solutions to the problem of simultaneous floating and absolute positioning of multiple subset elements)

For example:

<! DOCTYPE html>
 

Effect:



This is the problem that we often encounter, that is, the height of the parent element is collapsing when the child element floats ... but calm down, we can first think of setting a height for the parent element to solve it, but we have to adapt ourselves. Self adaptation. Self adaptation. Do not force the parent element to stand up, then, this time we have the following three ways to make the parent element consciously stand up for the child element prop up a piece of sky.

method One:

This method is more commonly used, that is, to add the parent element:

Overflow:hidden;
 


That's good, just fine.



Although this method can solve a highly adaptive problem, However, it would be awkward if the parent element had an absolute positioning at the same time as a subset element, and it was positioned outside the bounds of the parent element, because the absolutely positioned child element (part one) could not be found. , eh, are all overflow:hidden; Harm, was hidden.

Just like this:


<! DOCTYPE html>
 

 

 

This problem I still often encounter, I do not know whether you have this experience. However, there is always a solution.

Method Two:

The overflow:hidden of the parent element in the above code; To


Float:left;
 

(right also can)

Read it:


It's OK. Thus, the adaptive problem of the parent element is solved, and the absolute positioning problem of the child element is solved. Of course, due to the use of the parent element of the floating cause of its parent element if there is any problem, we need to be flexible according to the actual situation of the solution.



So it seems that the above two methods are still flawed, there is no one can be more beautiful (really beautiful) to solve this problem method. Yes, yes, we continue:

Method Three:

We do not set Overflow:hidden for the parent element; Also does not set float:left;. We add the following CSS for the parent element:


			#parent:: After {
				content: "";
				Display:block;
				Clear:both;
			}
 

Then, "Refresh" a little, haha, the effect came out (IBID.), where display set to block or Inline-block can be. And this method is also very beautiful, and then, like it, haha.