In CSS, How Does Overflow Interact with Float

In CSS, how does overflow interact with float?

You need to consider the concept of Block formatting contexts where you can read the following:

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.

So when adding overflow:hidden, the div2 will establish a new BFC then we can read:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space ^ref

To make it easy, when an element create a BFC its content will no more interact with the outside world. From the MDN you can read:

Setting overflow: auto created a new BFC containing the float. Our <div> now becomes a mini-layout inside our layout. Any child element will be contained inside it.

Float with overflow scroll in css

Try to

.parent {
  overflow-x: scroll;
  display: Block;
  white-space: nowrap;
}

.parent .sub {
  /*float:left;*/
  display: inline-block;
  margin-right: 10px;
  border: 1px solid red;
}

<div class="parent">
  <div class="sub">testing</div>
  <div class="sub">testing testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
</div>

CSS overflow:hidden with floats

I try to end the confusion:

ul is a block-level element as is the p element (they stretch to 100% of the parent width). That is why per default the p will appear below the ul if no width or display is declared on those elements.

Now in your example the ul contains only floated elements. This makes it collapse to a height of 0px (It still has 100% width though as you can see in the example). The adjacent p will appear to the right of the floated lis because they are considered as normal floated elements.

Now declaring overflow (any value other than visible) establishes a new block formatting context, which makes the ul contains its children. Suddenly the ul "reappears", not having size 0px anymore. The p is getting pushed to the bottom. You could also declare position:absolute to achieve the same "clearing" effect (with the side effect that now the ul is taken out of the normal element flow - the ps will be overlapped by the ul.)

See the example fiddle

If you are into the technical stuff, compare the according paragraphs of the CSS spec:

§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

and

§10.6.7 'Auto' heights for block formatting context roots. (Thanks to BoltClock for digging out the links).

ul{    list-style-type:none;    margin:0; padding:0;    background-color:#dddddd;    border:2px solid red;}li{    float:left;}a{    display:block;    width:60px;    background-color:#555;    color:white;}p{    margin:0;    outline:2px dotted blue;}#two{    clear:both;    overflow:hidden;}

No overflow:<ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul><p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats  </p><br>With overflow: hidden<ul id="two"><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul><p>the ul reappeared - it now contains the child li's - the float is cleared</p>

CSS Width auto and float left - Allow to overflow

Since float elements do not increase parent's width you probably need to make them display: inline-block then you can add white-space: nowrap to the parent. display: inline-block is also useful if you need to use non-transparent background for the parent.

.container {  background-color: yellow;  white-space: nowrap;  font-size: 0;  margin: 5px 0;}.second.container {  display: inline-block;}.container > div {  display: inline-block;  width: 200px;  height: 50px;  background-color: firebrick;  margin: 10px;}

<div class="container">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div><div class="second container">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

Effect of overflow and clear styles with floats

1. Why clear:both would cause an element to clear a floated element that isn't directly affecting its position.

   It may not be directly affecting its position, but it would still have affected it anyway, because in the absence of any clearance, floats aren't normally restricted in how they affect the rest of the normal flow layout even once they are taken out of it, not even by different parent elements such as your .b content element with the left margin in this case. The only real restriction is that floating elements may only affect elements that come after them in document tree order, i.e. elements that are following (not preceding) siblings, as well as their descendants.

   The content that's just above the element within your content column isn't tall enough to push it beneath the floated element. If you remove that declaration, you would see that both .c elements become positioned next to their respective floats as well.

   When you add clear, what happens is that it forces the clearing element to be positioned beneath the float regardless of where it ends up horizontally.

2. Why overflow:auto on the parent element fixes the issue.

   This is because any block boxes with overflow other than visible generate block formatting contexts. A property of a block formatting context is that floating boxes outside it can never interact with any boxes inside it, and vice versa.

   Once you cause the content element to establish its own block formatting context, your floating element is no longer able to affect any elements inside the content element (see the section on the float property), and the clearing element inside it is no longer able to clear any floats that are outside the content element (see the clear property).

Float Right break on overflow

This is what you want, but using flex rules. And exactly:

display: flex - sets flexibility;

justify-content: space-between - distributes blocks evenly throughout the free space;

flex-wrap: wrap - sets the transfer of blocks when narrowing the browser window.

.border {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

<div class="border px-3">
   <span>December 6th, 2020</span>
   <span>This is some example text right here</span>
</div>

HTML, overflow:scroll, and float

you need to insert those uls in another div, to which you'll give width=[width of ul]*[number of uls]

http://jsfiddle.net/seler/gAGKh/
or count total width of uls
http://jsfiddle.net/seler/gAGKh/1/

---

Related Topics