Home  >  Article  >  Web Front-end  >  Why is it said that overflow: hidden; can clear float_html/css_WEB-ITnose

Why is it said that overflow: hidden; can clear float_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:02:451263browse

Generally, clear:both is used to clear floats, but I found that many people use overflow: hidden to clear floats. Its original intention is to hide redundant things. Why can it clear floats?


Reply to discussion (solution)

It’s because overflow will re-establish block formatting (block formatting context) floats, position absolute, inline-block, table-cell for the elements in it except (visible) and table-caption are not block-level styles, so clear is used to control floating overflow. Floating can also be cleared because when overflow is set on the parent element, in addition to visible, it will also be created when there is only auto, hidden or scroll. The new block-level format gives its child elements a clear floating effect. The specific information can be seen here. Although clear is an old method, it is still recommended to use clear. Some situations will be better handled than overflow

The overflow:hidden attribute is equivalent to letting the parent stick to the content, so that it can stick to the content in its object (including div boxes using float), thus clearing the float. Clear:both uses the method of clearing floats at the child level. You can see it clearly by looking at the location used.

<div style="overflow:hidden">   <div style="float:left"></div></div>


<div >   <div style="float:left"></div>  <div style="style="clear:both""></div></div>

is because overflow will re-establish block formatting context (block formatting context) floats for its elements in addition to (visible). Position absolute, inline-block, table-cell and table-caption are not block-level styles, so clear is used to control floating overflow. Floating can also be cleared because when overflow is set on the parent element, in addition to visible, there is only When auto, hidden or scrolling, a new block-level format will be created for its child elements to achieve a clear floating effect. The specific information can be seen here. Although clear is an old method, it is still recommended to use clear in some cases. It will be handled better than overflow


I really want to fuck your whole family!

The overflow:hidden attribute is equivalent to letting the parent stick to the content, so that it can stick to the content within its object (including div boxes using float), thus clearing the float. Clear:both uses the method of clearing floats at the child level. You can see it clearly by looking at the location used.

<div style="overflow:hidden">   <div style="float:left"></div></div>


<div >   <div style="float:left"></div>  <div style="style="clear:both""></div></div>


I don’t understand. If the float is still not cleared, doesn’t the parent count as close to the content?
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn