How to solve the height of collapse

　　hello friends, I go again Oh! On the right, today's topic is the height of it collapsing.

　　You must first know what is the height of collapse. In fact, it refers to the height of collapse when the parent element is not to determine the height (ie the height of the parent element propped up by the sub-elements), and added a floating sub-elements, the content can not prop up the height of the parent element, the parent element that is highly collapse occurred.

　　Solution:

　　　　A first, open BFC element, the element will have the following characteristics:
　　　　　　　　　　Vertical 1. The parent element from the outside and do not overlap the sub-element
　　　　　　　　　　2. Open BFC elements not covered by the floating element
　　　　　　　　　　element 3. The opening may BFC child element containing floating

Open the way the elements BFC attributes:

　First, add a statement to the parent element, clear float overflow: hidden; 
　　but the width of the parent element of this approach will be lost, and this way can lead to shift the elements below will cause other structural problems, it is generally not recommended .

　Second, set the element positioning 
 
　three elements set to display: inline-block; you can also solve the problem, but will result in the loss of width, not recommended to use this way
　

　　　　Second, behind the child element floated add an empty div, and add to that the element div style:

23 * Since this div does not float, so he can be stretched height of the parent element, 
24 * and then remove them float, which can be softened by the height of the parent element empty div, 
25 * basically no side effect

　　　　　　.boxWrap .con{
　　　　　　　　　　clear: both;　height: 0; overflow: hidden;

　　　　　　　　}

 

　　　　　　<div class="boxWrap">

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<div class="con"></div>

　　　　　　</div>

　　　　Third, the universal clear float process:

　　　　　　.boxWrap:after{

　　　　　　　　　　　　content:".";

　　　　　　　　　　　　display: block;

　　　　　　　　　　　　clear: both;

　　　　　　　　　　　　height: 0;

　　　　　　　　　　　　overflow: hidden;

　　　　　　　　　　　　visibility: hidden;

　　　　　　　　}

 

　　　　　　<div class="boxWrap">

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　</div>

 

　　This method is the best solution, but to solve problems, not create new problems, not to disturb the structure and style of the parent element, and therefore is the most recommended method that you used.

 

 OK, here to address the collapse of the height of methods have been introduced over, if you have any other good ways, then welcome to come together to share with you!