One, under normal circumstances, that is, without any floating style, etc.
Setting the parent element's height to Aotu or 100% or not, the parent element automatically adjusts its height based on the height of the child element.
Chestnuts
<!--HTML code -<DivID= "Wrap"> <imgsrc= "./1.png"alt= "logo"/> <DivID= "Content"></Div></Div>
CSS Styles
#wrap { background:pink;} #content { width:150px; height:50px; Background:greenyellow;} img{ width:100px; height:100px;}
Display as:
Second, when the child element is set to float, the height of the parent element will not automatically adapt to the floating child elements.
For example, add a floating style to the above chestnut img: float:left, display effect
Therefore, in order to allow the height of the parent element to automatically adapt to the floating child elements, there are many methods, I commonly used 2 kinds: 1. Set the Overflow:hidden for the parent element, while the height is not set or 100% or auto;
effect, the height of the parent element wrap has already contained 2 sub-elements: floating img and non-floating green div:
Code:
HTML code:
<id= "wrap"> <src= "./1.png " alt=" logo "/> <id=" Content "></div></div>
CSS style code:
#wrap { background:pink; Overflow:hidden; } #content { width:150px; height:50px; Background:greenyellow; } img{ width:100px; height:100px; Float:left; }
2, the parent element of the bottom of a new label, set Clear:both;
The effect is ditto, no
HTML code:
<DivID= "Wrap"> <imgsrc= "./1.png"alt= "logo"/> <DivID= "Content"></Div> <Divclass= "Clear"></Div></Div>
CSS style code:
#wrap { background:pink; } #content { width:150px; height:50px; Background:greenyellow;} img{ width:100px; height:100px; Float:left;}. clear{ clear:both;//Key Code}
After the child element floats, the parent element is highly adaptive