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

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

Recommend

Detailed example of reading speed of js objects

1. Accessing literals and local variables is the ...

Docker installation of RocketMQ and solutions to problems encountered during installation

Table of contents Pull the rocketmq image Create ...

Web page color matching example analysis: Green color matching web page analysis

<br />Green is between yellow and blue (cold...

How to elegantly implement WeChat authorized login in Vue3 project

Table of contents Preface Prepare Implementation ...

Solution for Docker container not recognizing fonts such as Songti

Problem background: When using docker to deploy t...

CentOS 7 installation and configuration method graphic tutorial

This article records the detailed installation tu...

Mysql timeline data to obtain the first three data of the same day

Create table data CREATE TABLE `praise_info` ( `i...

Analysis of three parameters of MySQL replication problem

Table of contents 01 sql_slave_skip_counter param...

Detailed explanation of the code between the MySQL master library binlog (master-log) and the slave library relay-log

Main library binlog: # at 2420 #170809 17:16:20 s...

ByteDance interview: How to use JS to implement Ajax concurrent request control

Preface To be honest, I've been feeling very ...

How to allow external network access to mysql and modify mysql account password

The root account of mysql, I usually use localhos...

Introduction to installing JDK under Linux, including uninstalling OpenJDK

1. View openjdk rpm -qa|grep jdk 2. Delete openjd...

When div is set to contentEditable=true, the cursor cannot be positioned after resetting its content

I was recently working on a comment feature that ...

Analysis and solution of Chinese garbled characters in HTML hyperlinks

A hyperlink URL in Vm needs to be concatenated wit...

ElementUI implements cascading selector

This article example shares the specific code of ...