20972

Overflow:hidden in float. Does it hide anything?

Question:

I understand that overflow:hidden is a way to clear float, but I do not understand why. I suppose that If we do use overflow:hidden it is because there is something outside the element that was affected by the float? if so, what is hidden?

For example, in this case, is there anything in #second that is hidden that makes it be beside #first ?

(There is another question that is related, but this is different, this is more specific. My question is: does "overflow:hidden" hide anything? what is it?)

Here is the example: <a href="http://jsfiddle.net/NSCpD/" rel="nofollow">http://jsfiddle.net/NSCpD/</a>

CSS:

#first{ float:left; width:100px; height:100px; background:blue; } #second{ width:300px; height:300px; overflow:hidden; /* això fa que no li afecti el float */ background:red; }

HTML:

<div id="first"> </div> <div id="second"> </div>

Answer1:

As its name suggests, overflow:hidden hides any content that <em>overflows</em> the element (i.e. excesses the given dimensions). In this example there is no overflow actually, so nothing is hidden. But the side-effect of setting the overflow other than visible (as well as display: inline-block, float itself etc.) is the change of the behavior of the block. While the normal block effectively doesn't take floats into account at all (only its text content does), the block that establishes new block formatting context (see Adrift's answer) isolates all of its content inside, including nested floats, potentially collapsible margins etc.

This side effect may be used to prevent the container of floats from collapsing, but it doesn't have anything to do with <em>clearing</em> floats. Clearing and BFCs act very differently in case of collapsible margins, other floats earlier in the document, etc.

Answer2:

An element with an overflow value other than visible establishes a new <a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting" rel="nofollow">Block Formatting Context</a>. The fiddle your provided is a bit different than when an in-flow block level element contains a float. Even if the in-flow block level element is a sibling of an out of flow float it will still acknowledge it's presence as if it were a line box when a new BFC is created. The <a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting" rel="nofollow">spec</a> describes this in these two excerpts:

<blockquote>

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). <strong>This is true even in the presence of floats</strong> (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

</blockquote>

Recommend

  • How to limit break-all to only long words?
  • How to show that Shift Left Logical multiplies by 2^n?
  • JScrollPane problem
  • Good pattern for hiding ion-nav-bar on login and not having a back button just after login?
  • What code changes are required to migrate C++ from VS2003 to VS2005?
  • C++ development on linux Code::Blocks, EMACS or GVIM [closed]
  • drop duplicates pandas dataframe
  • How to add specific media query rule when media query combined
  • Base Internationalization and “Could not find a storyboard named […]”
  • Python multiprocessing of a sum
  • How could I prohibit anonymous access to my NodeRed UI Dashboard on IBM Cloud(Bluemix)?
  • UIButton Borders Function Only Gives Back White Borders
  • How does ActiveSupport do month sums?
  • Upper limits for fibonnacci
  • Ionic Slide Up Slide Down Animation for only one view in sidebar
  • Select inner HTML item in CSS
  • How to request unsampled report from Google Analytics Management API using Google Apps Script?
  • Flex items with same property values are rendering in different sizes
  • LESS CSS how to modify parent property in mixin
  • Prevent Tomcat from caching request during starup
  • How To Customize ASP.NET Chart Databound To SqlDataSource
  • Jackson Parser: ignore deserializing for type mismatch
  • How to modify the colors in the legend of a plot using a fill gradient?
  • OpenGL ES texture problem, 4 duplicate columns and horizontal lines (Android)
  • Highlight and Bold text in JTextPane
  • Xamarin Forms - UWP Fonts
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • How to convert from System.Drawing.Color to Excel.ColorFormat in C#? Change comment color
  • How can I estimate amount of memory left with calling System.gc()?
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • Android Google Maps API OnLocationChanged only called once
  • JaxB to read class hierarchy
  • Running Map reduces the dimensions of the matrices
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal