About overflow: hidden, overflow: hidden

About overflow: hidden, overflow: hidden

(This article only appliesHiddenThe usage of this value is described)

About overflow: hidden; many people know that it is an attribute hidden by overflow, but not many people know its magic! First, let's talk about the well-known overflow hiding!

Overflow hiding

Generally, the content exceeds the parent box, as shown below:

After using overflow: hidden;Is shown as follows:

If it exceeds the limit, it will be hidden! Generally used inOne line of textThe content that exceeds the fixed width is hidden. However, this type of content is usually used with the ellipsis. The ellipsis (a line of text is valid) is displayed when the content exceeds the specified position ):

.box {width: 200px;height: 50px;margin: 200px auto;background: #ccc;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

<Div class = "box"> I'm text content, I'm text content I am text content, I am text </div>

 

In this way, the box must be a block-level box with a width!

The above is just about its own hidden overflow function, so let's talk about some of its unique functions!

Overflow: hidden; clear floating

There will certainly be a situation in the layout. In a parent box, there are two child-level boxes floating left and right, that is, the common left and right layout, but the child-level content is not fixed, there will be more and less, at this time, the parent level cannot be given a certain height, but is changed according to the amount of sub-level content, if not given the height, the page will collapse. What is the parent collapse? Let's take a look!

First, this is the parent level (the red box) Given a certain height, and the left and right child level floating, the display layout is no problem,

But now we want to increase the content in right, so the parent-level box should be increased together and the footer part should be taken down, so the red parent-level height will not be given, to make the parent level adaptive, we generally think about deleting the height, but the problem is:

I believe many people will encounter this similar problem when writing pages. That is, the parent level collapsed! We can see that the red parent class is no longer displayed, but the footer part ran to the two child classes in the red box. It can be understood in this plain sense: the two child levels are separated from the standard stream due to the floating relationship, but the parent level does not give height, so the parent level thinks that it has no content, therefore, the height will not be supported by the content, which is equivalent to the parent height of 0px. Then the box footer that is equal to him will be arranged according to the standard stream, the red box is arranged next to the level, but the red box is 0 in height. This causes the collapse of the page! This is the time to rely on overflow: hidden; to play its role! Let's add it to see what effect:

In this case, the parent class is not given a height, but an overflow: hidden is added. If at this time we do not give the floating right box height, so that it can be opened based on its own content, just like listing news, if there are more lists, the box will be big, and the red parent will also increase.

Assume that the right content is a little small.

Add right now

Now we can see that the height of the parent level changes with the content of the Child level, without any impact on the layout!

If you use overflow: hidden in browsers with lower ie versions, you cannot achieve this effect, then add zoom: 1;

For better compatibility, if overflow: hidden; is used to clear floating and solve the parent-level collapse problem, it is recommended to use it with zoom: 1;, that is, overflow: hidden; zoom: 1;

 

 

Solve the Problem of white at the bottom of the inserted image!

When you insert an image, if the parent box of the image is not given the height, the parent box will be opened based on the Image Height and several pixels will be added. For example:

The red color at the bottom of the box is the background color of the parent box. The solution is as follows:

1. Add a height to the parent level, which is as high as the image, and add overflow: hidden. These two are added together, which improves compatibility!

2. If we don't need to add height to the box to make it adaptive to the image height, we can add the display: block to the img;

 

If this article is helpful to you, please recommend it!