Analyze the reason why the overflow attribute cannot clear the float

A brief analysis of the reasons why the overflow attribute is ineffective in clearing floats requires specific code examples

Floating elements are often used to implement multi-column layouts and floating pictures in web page layouts and other effects. However, when floating elements are used in the parent container, the parent container often fails to calculate its height correctly, causing layout confusion. In order to solve this problem, we usually use some techniques to clear floats. The more common way is to use the overflow attribute.

The overflow attribute is a commonly used attribute in CSS, which is used to control how content overflows. It has four optional values: visible (default value, the content will not be trimmed and will overflow the parent container), hidden (the content will be trimmed and the overflow part will not be visible), scroll (the content will be trimmed and the overflow part can be scrolled), auto (the browser automatically adds scroll bars as needed).

Normally, when the child elements in the parent container are set to float, we will try to add the overflow attribute to the parent container to clear the impact of floating, for example:

<style>
    .container {
        overflow: hidden;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="container">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

However , strangely, this seemingly feasible method does not work in some cases, the parent container still cannot calculate the height correctly. In order to explain this phenomenon, we need to understand from the calculation method of the height of the parent container of the floating element.

The parent container will ignore the height of the floating child element when calculating its own height. Even if the floating child element is higher than the parent container, the parent container will think that the height of the child element is equal to the height before floating. This causes the height of the container to not correctly adapt to the internal floating elements, thus affecting the overall layout.

Back to the method we tried to use the overflow attribute to clear floats. In fact, the overflow attribute does not directly affect the clearing of floats. It actually creates a new BFC (block-level formatting context) for the parent container. The BFC can be understood as an independent container. Floating elements inside the container will not affect external elements. Due to the different creation methods of BFC and different implementations of browsers, the overflow attribute may be invalid.

So, if we really want to clear the floating effect through the overflow attribute, how should we solve it? Here are several common solutions for reference.

1. Use clearfix technique
   This is a common method to clear the effect of floating by adding an empty block-level element to the parent container of the floating element and setting the clear attribute. An example is as follows:

<style>
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="clearfix">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

2. Use the ::after pseudo-element to clear floats
   This is a cleaner solution, use the ::after pseudo-element on the parent container of the floated element , and set the clearfix style, the example is as follows:

<style>
    .container::after {
        content: "";
        display: table;
        clear: both;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="container">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

3. Use flexbox layout
   Flexbox is a new layout method, which can better solve the problems caused by floating. An example is as follows:

<style>
    .container {
        display: flex;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="container">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

To sum up, we need to note that the overflow attribute does not have a direct impact on clearing floats, but is achieved indirectly by creating a BFC. At the same time, different browsers implement BFC in different ways, which may cause the overflow attribute to be invalid. Therefore, in addition to the overflow attribute, we can also try other solutions, such as the clearfix technique, the ::after pseudo-element to clear the float, or using methods such as flexbox layout to clear the float.

The above is the detailed content of Analyze the reason why the overflow attribute cannot clear the float. For more information, please follow other related articles on the PHP Chinese website!