How to increase the height of a floating parent element

This time I will show you how to support the height of the floating parent element and what are the precautions to support the height of the floating parent element. The following is a practical case. Let’s take a look. take a look.

When we set the float attribute value to a child element that is not none, there will be two situations in which the height of the parent element collapses.

The parent element happens to have no height set; then this The parent element has no height.

The height set by its parent element is not enough, causing the child element to overflow;

When we give the li element a height and float it to the left, the height of ul is 0

Solution:

Enable BFC:

Set the overflow attribute of the element to the attribute value except visible

Set the float attribute of the element to the value except none Attribute value

Set the element to absolute positioning absolute

## This to set the element's

Display Properties to: Inline-Block or Table-Cell, Flex Flex , inline-flex

Clear floating

Add appropriate height to parent element

I believe you have mastered the method after reading these cases, more Please pay attention to other related articles on the php Chinese website!

Related reading:

How to use getBoundingClientRect() to implement scrolling and fixation of div containers

Two ways to implement waterfall flow layout A method

How to make a "dot" border appear after clicking the button

The above is the detailed content of How to increase the height of a floating parent element. For more information, please follow other related articles on the PHP Chinese website!