Detailed explanation of the role of overflow:hidden (overflow hiding, clearing floats, solving margin collapse)

1. overflow:hidden overflow hidden

If overflow:hidden is set for an element, then if the content of the element exceeds the given width and height attributes, the excess part will be hidden and will not take up space.

/*css style*/
<style type="text/css">
    div{ width: 150px; height: 60px; background: skyblue;
	 overflow: hidden; /*Overflow hidden*/
       }
</style>
 
/*html*/
<div style="">
    The weather is very nice today! <br>The weather is very nice today! <br>
    The weather is very nice today! <br>The weather is very nice today! <br>
</div>

The effect is as follows:

Generally, on a page, an ellipsis is displayed after overflow. For example, when a line of text exceeds a fixed width, the excess content is hidden and an ellipsis is displayed.

/*Only for single line text*/
div{ 
    width: 150px;
    background: skyblue;
    overflow: hidden; /*Overflow hidden*/
    white-space: nowrap; /*Specifies that text does not wrap*/
    text-overflow: ellipsis; /*When the text overflows within the object, an ellipsis mark (...) is displayed*/
}

The effect is as follows:

2. overflow:hidden clears floating

Generally speaking, when the height of the parent element is not set, the height will be adaptive as the content increases. When all child elements inside the parent element are set to float, the child elements will be separated from the standard flow and will not occupy any place. The parent element cannot detect the height of the child elements, and the height of the parent element is 0. So the question is, as follows:

/*css style*/
<style type="text/css">
    .box{ background:skyblue; }
    .kid{ width: 100px;height: 100px; float:left;}
    .kid1{ background: yellow; }
    .kid2{ background: orange; }
    .wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>
 
/*html*/
<body>
    <div class="box">
        <div class="kid kid1">Child element 1</div>
	<div class="kid kid2">Child element 2</div>
    </div>
    <div class="wrap">Other parts</div>
</body>

As shown above, since the parent element has no height, the elements below will push up, causing the page to collapse. Therefore, you need to add an overflow:hidden attribute to the parent so that the height of the parent adapts to the height of the child container and its content. as follows:

Since overflow:hidden; cannot achieve this effect in lower versions of IE, you need to add zoom:1;

So in order to make it more compatible, if you need to use overflow:hidden to clear the float, it is best to add zoom:1;

/*css style*/
<style type="text/css">
    .box{ background:skyblue; 
	  overflow: hidden; /*clear floating*/
	  zoom:1;
        }
    .kid{ width: 100px;height: 100px; float:left;}
    .kid1{ background: yellow; }
    .kid2{ background: orange; }
    .wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>
 
/*html*/
<body>
    <div class="box">
        <div class="kid kid1">Child element 1</div>
	<div class="kid kid2">Child element 2</div>
    </div>
    <div class="wrap">Other parts</div>
</body>

3. overflow:hidden solves margin collapse

There are child elements inside the parent element. If you add the margin-top style to the child element, the parent element will also follow, causing the outer margin to collapse, as follows:

/*css style*/
<style type="text/css">
    .box{ background:skyblue;}
    .kid{ width: 100px; height: 100px; background: yellow; margin-top: 20px}
</style>
 
/*html*/
<body>
    <div class="box">
	<div class="kid">Child element 1</div>
    </div>
</body>

Therefore, adding overflow:hidden to the parent element can solve this problem.

/*css style*/
<style type="text/css">
    .box{ background:skyblue;
          overflow: hidden; /*Solve margin collapse*/   
        }
    .kid{ width: 100px; height: 100px; background: yellow; margin-top: 20px}
</style>
 
/*html*/
<body>
    <div class="box">
	<div class="kid">Child element 1</div>
    </div>
</body>

This concludes this article on the detailed explanation of the role of overflow:hidden (overflow hiding, clearing floats, solving margin collapse). For more information about the role of overflow:hidden, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: One minute to experience the smoothness of html+vue+element-ui

>>: How to limit the input box to only input pure numbers in HTML

How to install setup.py program in linux

Detailed explanation of the role of overflow:hidden (overflow hiding, clearing floats, solving margin collapse)

1. overflow:hidden overflow hidden

2. overflow:hidden clears floating

3. overflow:hidden solves margin collapse

How to install setup.py program in linux

Sharing of the fast recovery solution for Mysql large SQL files

Tutorial on using Multitail command on Linux

Introduction to JWT Verification Using Nginx and Lua

The process of using vxe-table to make editable tables in vue

The Complete List of MIME Types

Vue ElementUI Form form validation

HTML CSS3 does not stretch the image display effect

Detailed explanation of the process of docker packaging Python environment

Ubuntu 18.04 MySQL 8.0 installation and configuration method graphic tutorial

Recommend

Introduction to using window.open, a jump menu that opens in a new window

How to build a Vue3 desktop application

CentOS7 uses rpm to install MySQL 5.7 tutorial diagram

Docker deploys Laravel application to realize queue & task scheduling

Summary of the use of CSS scope (style splitting)

Learning to build React scaffolding

The difference between storing full-width characters and half-width characters in MySQL

Tutorial on installing Apache 2.4.41 on Windows 10

Detailed explanation of table_open_cache parameter optimization and reasonable configuration under MySQL 5.6

What is the relationship between Mapper sql statement fields and entity class attribute names

Solve the problem that the default value of CSS3 transition-delay attribute is 0 without unit and it is invalid

Detailed discussion of several methods for deduplicating JavaScript arrays

Let's talk about the storage engine in MySQL

MySQL joint index effective conditions and index invalid conditions

Deleting the database and running away? How to use xtraback to back up the MySQL database