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

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

Implementation of Grid common layout

Detailed explanation of the use of Vue image drag and drop zoom component

Detailed explanation of the principle and function of JavaScript closure

Element table header row height problem solution

Detailed explanation of how to use Tomcat Native to improve Tomcat IO efficiency

Solve the problem of using less in Vue

Implementation of element input box automatically getting focus

Correct use of MySQL partition tables

Introduction to the Enctype attribute of the Form tag and its application examples

Mysql database master-slave separation example code

Recommend

Detailed explanation of the process of building Prometheus+Grafana based on docker

Detailed steps for adding hosts you need to monitor in zabbix

Implementation example of video player based on Vue

How to use the markdown editor component in Vue3

Analysis of the principle and usage of MySQL custom functions

Detailed explanation of installing redis in docker and starting it as a configuration file

Analysis and opinions on the design structure of the large picture on the homepage of Taobao Mall (picture)

Complete the search function in the html page

Install mysql offline using rpm under centos 6.4

Analyzing the node event loop and message queue

Introduction to Jenkins and how to deploy Jenkins with Docker

Win2008 Server Security Check Steps Guide (Daily Maintenance Instructions)

Setting up Docker proxy under CentOS 7 (environment variable configuration of Systemd service under Linux)

Vue implements page caching function

Detailed explanation of the process of deploying MySql on Centos server and connecting to Navicat