Solve the problem that the sub-level object uses css float, while the parent-level div cannot adapt to the height and cannot be supported by the parent-level content. The parent-level div has no height solution.
When float is used in the box of an object, the object itself cannot be stretched out and the adaptive height is caused by floating.
Method 1: clear floating with css clear
1. Complete div css code with the clear effect
Add a clear object to the front of the parent div tag </div> to clear the floating object.
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> The parent div does not have an 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}
. Clear {clear: both}
</Style>
</Head>
<Body>
<Div class = "divcss5">
<Div class = "divcss5-lf"> </div>
<Div class = "divcss5-rt"> </div>
<Div class = "clear"> </div>
</Div>
</Body>
</Html>
This method requires note that the position of the clear: both addition is not to add the clear style directly to the parent level, but to add the clear object box before the parent level </div>.
Method 2: Add the overflow style to the parent style
This method is very simple. It can also be used as a recommended method to solve the problem that the parent level cannot be opened with an adaptive height. Instead of adding a div box object, you only need to add an overflow: hidden style to the parent level.
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> The parent div does not have an adaptive height instance </title>
<Style>
. Divcss5 {width: 500px; border: 1px solid #000; padding: 10px; overflow: hidden}
. Divcss5-lf {float: left; width: 220px; height: 100px; background: #000}
. Divcss5-rt {float: right; width: 230px; height: 100px; background: # 06F}
</Style>
</Head>
<Body>
<Div class = "divcss5">
<Div class = "divcss5-lf"> </div>
<Div class = "divcss5-rt"> </div>
</Div>
</Body>
</Html>
Recommended. This method is very simple to solve the problem of using float. The parent div cannot adapt to the height, but cannot adapt to the height without the height of the parent content.
Record, it will be very convenient to use it directly for later use.
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
