Resolving child objects using CSS float and the parent Div can not be adaptive height, can not be the parent content distraction solution, the parent Div does not have a high resolution.
The outermost parent Div cannot be adaptive to height-cannot be stretched with the object without height
When the box in the object is used float, the object itself can not be stretched to adapt to the height, this is due to the floating cause.
How to solve the parent div object Adaptive Height, the method has three kinds, next DIVCSS5 one after another introduction.
1, first we look at the HTML source code:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> Parent Div Non-adaptive height instance </title>
<style>
. divcss5{width:500px border:1px solid #000; padding:10px}
. divcss5-lf{float:left; width:220px height:100px; background: #000}
. divcss5-rt{float:right; width:230px height:100px; background: #06F}
</style>
<body>
<div class= "DIVCSS5" >
<div class= "DIVCSS5-LF" ></div>
<div class= "Divcss5-rt" ></div>
</div>
</body>
2, the problem effect screenshot:
When a child object uses float, the parent Div cannot be adaptive to a height instance screenshot
Method One: Set a fixed height on the parent
This method can be used to determine the height of the child-level object of the parent div.
If the above case, we know the internal div height of 100px, the parent set CSS height for 100px look at the effect.
1, complete DIV+CSS instance HTML code (to the parent div plus height):
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> Parent Div Non-adaptive height instance </title>
<style>
. divcss5{width:500px;border:1px solid #000;p adding:10px height:100px}
. divcss5-lf{float:left; width:220px height:100px; background: #000}
. divcss5-rt{float:right; width:230px height:100px; background: #06F}
</style>
<body>
<div class= "DIVCSS5" >
<div class= "DIVCSS5-LF" ></div>
<div class= "Divcss5-rt" ></div>
</div>
</body>
2, add height solution can not open child objects using float effect screenshot
100px resolution of the parent div Adaptive Height screenshot for the Father plus height
The disadvantage of this method is that the parent is a fixed height and is not highly adaptive with the content height. This method is used for determining the height of the content within the parent Div.
Method Two: Use CSS clear to remove floating
Close the parent div tag
Clears the floating object with a clear front.
1, add clear effect complete div CSS Code
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> Parent Div Non-adaptive height instance </title>
<style>
. divcss5{width:500px;border:1px solid #000;p adding:10px}
. divcss5-lf{float:left; width:220px height:100px; background: #000}
. divcss5-rt{float:right; width:230px height:100px; background: #06F}
. clear{Clear:both}
</style>
<body>
<div class= "DIVCSS5" >
<div class= "DIVCSS5-LF" ></div>
<div class= "Divcss5-rt" ></div>
<div class= "Clear" ></div>
</div>
</body>
2, plus CSS clear to solve the parent div can not be adaptive height
Use Clear:both to clear a parent child object to create a float
This method requires attention to the position of Clear:both Plus, not directly to the parent, but to the parent
Front with clear Object box.
Method Three: Add overflow style to the parent style
This method is very simple, also can be used as a recommendation to solve the parent can not be stretched adaptive height method, can not increase the div box object, only need to add a overflow:hidden style to the parent.
1, complete CSS div code
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> Parent Div Non-adaptive height instance </title>
<style>
. divcss5{width:500px;border:1px solid #000;p adding:10px Overflow:hidden}
. divcss5-lf{float:left; width:220px height:100px; background: #000}
. divcss5-rt{float:right; width:230px height:100px; background: #06F}
</style>
<body>
<div class= "DIVCSS5" >
<div class= "DIVCSS5-LF" ></div>
<div class= "Divcss5-rt" ></div>
</div>
</body>
2, add the CSS overflow method screenshot
Parent div plus overflow style resolves parent adaptive height
Recommended. This method is very simple to solve the child with float, the parent Div can not be adaptive height, not with the parent content of the number of adaptive height without height.
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
