Home > Web Front-end > HTML Tutorial > 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
Release: 2016-06-24 12:02:45
Original
1281 people have browsed it

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>
Copy after login
Copy after login


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

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>
Copy after login
Copy after login


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


I don’t understand. If the float is still not cleared, doesn’t the parent count as close to the content?
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template