Method One:
Html:
<DivID= "All1"><DivID= "Left1">1</Div><DivID= "left2">1</Div><Divstyle= "Clear:both; "></Div></Div>
Css:
#left1 { float:left; width:200px;} #left2 { float:left; width:200px;} #all1 {}The key to this approach is to use the clear:both to clear the floating element and all1 the parent element.
Method Two:
Html:
<Divclass= "AA"> <Divclass= "BB">Sffsssssssssssss</Div> <Divclass= "CC">Sffss</Div></Div>
Css:
.aa { border : 1px solid #000 ; background : #CC4 ; overflow : hidden ;} .bb { border : 1px solid #f00 ; background : #999 ; float : left ;} .cc { border : 1px solid #f00 ; background : #999 ; float : left ;} The point of this approach is that, after the child element has a float, the parent element needs to set a overflow:hidden, so that the parent element AA can be automatically unfolded.
Special NOTES:
Overflow:hidden must have width or height to overflow part of the hidden, if the outer box has no width or height, the inside is a floating element, it will be open
Summarize the methods above, each with a suitable place. For example, after Overflow:hidden, the child elements beyond the parent element will not be visible, you can try the following two code comparison,
Code One:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title></Head><styletype= "Text/css" >. AA{Border:1px solid #000;background:#CC4;Overflow:Hidden;}. BB{Border:1px solid #f00;background:#999;float: Left;Margin-top:-10px;Margin-left:110px;}. CC{Border:1px solid #f00;background:#999;float: Left;}</style><Body><Divclass= "AA"> <Divclass= "BB">Image</Div> <Divclass= "CC">Image</Div></Div></Body></HTML>
：
Code two:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title></Head><styletype= "Text/css" >. AA{Border:1px solid #000;background:#CC4;}. BB{Border:1px solid #f00;background:#999;float: Left;Margin-top:-10px;Margin-left:110px;}. CC{Border:1px solid #f00;background:#999;float: Left;}</style><Body><Divclass= "AA"> <Divclass= "BB">Image</Div> <Divclass= "CC">Image</Div><Divstyle= "Clear:both"></Div></Div></Body></HTML>
：
The child Div uses float floating, how to open the parent element, let the parent element Div automatically adapt to the height of the problem
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
