Please give me a high score for the overflow:hidden question! _html/css

Please give me a high score for the overflow:hidden question! _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:09:07

Original

1069 people have browsed it

Without over:hidden, this is the effect:

<div style="background:blue;">     <div style="width:100px; height:100px; background:red; float:left;"></div> </div>

Copy after login

With over:hidden, this is the effect (under IE8 and 9, the parent div still cannot be displayed) :

<div style="background:blue; overflow:hidden">     <div style="width:100px; height:100px; background:red; float:left;"></div> </div>

Copy after login

Plus height:1%, the parent element can be displayed in IE

<div style="background:blue; overflow:hidden height:1%">     <div style="width:100px; height:100px; background:red; float:left;"></div> </div>

Copy after login

Question:
1. Why after adding overflow:hidden, the DIV of the parent element can be displayed normally without being affected by the floating of the child element? What is the principle?
2. The third piece of code, height: 1%. At this time, the parent element of the parent DIV should be body, and the current body height should be 0 (because the child div is floating)? Isn't height:1% equivalent to height:0;?
Even if it is not 0, it should be a fixed value. So why can the parent div here also adapt to the height?

Please don’t reply that you should do this or that. I know other methods, but I am confused about the above two questions now.
Please read my question carefully, thank you! :)

Reply to discussion (solution)

overflow;hidden Clearing the float means that the div is removed from the state of floating in the air If the height of the parent div is not high enough, it will be affected. Try to think about it from a three-dimensional space. If you don’t understand, I wrote some in your post. . .

The following content is the answer obtained by searching online:
overflow:hidden This CSS style is commonly used by everyone, but most people’s understanding of this style is only limited to hiding overflow, and for clearing The meaning of floating is not very clear. When it comes to clearing floats, we will think of another CSS style: clear:both. I believe everyone has no problem understanding this attribute. But what does the word "floating" mean? Let’s explain it in detail below. This is a commonly used div writing method. Let’s write the style below. You can do your own experiments in DMX
#box{ width:500px; background:#000; height:500px; }
#content { float:left; width:600px; height:600px; background:red; }
Adding an overflow:hidden attribute to the box div solves this problem. We know that the overflow:hidden attribute is used to hide overflow. After adding this attribute to the box, the width and height of our content are automatically hidden. In addition, we did another experiment. After deleting the height value of the div box, we found that the height of the box was automatically stretched by the height value of the div content. Having said that, let's understand the meaning of the word "floating". Our original understanding was that it was floating on a plane, but through this experiment, we found that this was not just a floating on a plane, but a three-dimensional floating! That is to say, when the content div is added with the floating attribute, it has been separated from the box div on the side of the display. In other words, what is the width and height of the content at this time? For the box that has been separated It doesn't work. When we fully understand the meaning of the word float, we will understand the explanation of the overflow:hidden attribute and what it means to clear float. In other words, when we add the overflow:hidden attribute to the box div, the three-dimensional floating of the content and other divs with floating attributes has been cleared. This is the exact meaning of the overflow:hidden attribute to clear floats. When we do not set the height of the box div, the height of the content div will expand the box div. On the other hand, what we need to note is that when we add a height value to the box div , then no matter what the height of the div content is, the height of box is the value we set. When the height of content exceeds the height of box, the excess part will be hidden. This is what hidden overflow means!

overflow;hidden清除浮动就是指子div从飘在空中的状态落下来了，如果父div高度不够，那么就要被影响，你试着从三维的空间去想想，没看明白的话我在你的那个帖子里写了一些。。。
我看到了，但是还是没太理解~而且div默认height不是100%吧？height如果是百分比，就是只相对于父元素的，div里如果没内容那height就应该是0~

没加over:hidden是这样的效果:
HTML code

加了over:hidden是这样的效果（在IE8、9下，仍然无法显示父div）：……
http://www.chinaz.com/design/2008/0818/35473.shtml参考这个

引用楼主 wsy87217 的回复:
没加over:hidden是这样的效果:
HTML code

加了over:hidden是这样的效果（……
嗯我好像明白了！

第2个问题能帮我看下吗？

1，overflow:hidden;是让子元素不溢出，而本身的div没有设置height属性,这样一来标准浏览器就去检测子元素的高。
2，height：1%是用来触发元素hasLayout，类似的可以用zoom:1替代；

引用 4 楼 wangyao1135 的回复:

引用楼主 wsy87217 的回复:
没加over:hidden是这样的效果:
HTML code

……
我没有设置body的高度，你看看效果。body的高度是0吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body{ background:#FF0000;}</style></head><body></body></html>

Copy after login

1，overflow:hidden;是让子元素不溢出，而本身的div没有设置height属性,这样一来标准浏览器就去检测子元素的高。
2，height：1%是用来触发元素hasLayout，类似的可以用zoom:1替代；
额。。。没太看明白~

引用 5 楼 wsy87217 的回复:

引用 4 楼 wangyao1135 的回复:

引用楼主 wsy87217 的回复:
没加over:hidden是这样的效果:
HTML code

我用fire bug看的，是0。。。

那浏览器显示的效果，说明了什么问题呢。。。。

浏览器的显示效果应该能说明body不是没有高度的吧。默认的应该是和浏览器打开的一样大的。应该是宽是100%高度也是

1，浮动float 是指示一个元素忽略自己和同级的块(block)属性，尽可能紧凑地利用空间；
overflow是指示一个元素，如何占有自己的block空间；
如果父元素没有定义overflow,游览器会只有一次布局呈现，把子元素显示完了就完了。如果父元素有overflow,游览器在把子元素呈现完后会再回溯一次，重新计算空间，计算并调整父元素的显示范围。然后才继续下面的元素布局。

2，流式布局的内的元素高度百分比是无效的，百分比只有在明确指定了高度的盒式模型内才有效。在流式布局内，高度百分比会直接被忽略。

3，以上其实为本人猜测，没有深入浏览器内部，也没有见到正式的官方解释。

谢谢大家！
稍微明白点了！：）