what is the difference between 'overflow and clear to clear float?

Question

html

<ul>
 <li> 
   <button>first part</button>
  </li>
 <li> 
   <button>second part</button>
 </li>
    <li>
    <button>third part</button>
   </li>
  </ul>
<div id="bottom">Believe Me</div>

css

body {
  font-size: 16px;
}
li {
  list-style: none;
  width: 300px;
  border: 1px solid black;
  margin-top: 20px;
  overflow: hidden;
}
li button {
  padding: 15px 10px;
  margin: 2px;
  display: block;
  float: right;
}
div#bottom {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background-color: red;
  margin-top: 50px;
}

we often use below class to clear 'float';

.clearfix{
  clear:both;
  overflow: hidden;
  contain: '';
}

sometime, we can only use 'overflow',that can solve our problem.

what difference between 'overflow' and 'clear'?

code about this question

Possible duplicate of [What is the different between clearfix hack and overflow:hidden vs overflow:auto?](http://stackoverflow.com/questions/1642565/what-is-the-different-between-clearfix-hack-and-overflowhidden-vs-overflowauto) — dippas, Mar 04 '16 at 02:07

score 2 · Accepted Answer · answered Mar 04 '16 at 02:52

Strange comparison since overflow and clear are completely unrelated. Unless I misunderstood your question. In which case, please rephrase so that we can clarify better.

Anyhow, overflow controls the any excess outside of the width of an element.

The overflow property specifies what happens if content overflows an element's box.

If you have a div with containing a large image and you want to restrict the image to not exceed the width of that container, overflow will do just that by giving it a hidden value. If you want it to scroll after a certain width or height, the scroll value will activate the scrollbars to allow you to do so.

Clear on the other hand, resets the floats.

The clear property specifies on which sides of an element floating elements are not allowed to float.

This is particularly helpful in responsive design to center an item that has been floated to the right in larger displays but you want to reset it to the native left position for smaller devices. Of course, the use of clear can be determined by other factors according to your need of it.

The example above mentioned would look like this

<div class="box">
  <button class="right">Hello</button>
</div>

CSS

.right{
   float: right;
}
@media (max-width: 420px){
   .right{
       clear: right;
   }
}

Overflow and clear are SO completely unrelated that there are lots of articles about how they interact. For instance https://stackoverflow.com/questions/1642565/what-is-the-different-between-clearfix-hack-and-overflowhidden-vs-overflowauto — edc65, Feb 01 '18 at 11:12

score 0 · Answer 2 · answered Mar 04 '16 at 03:35

In your example, you had floated element("button") inside a "li". "clear" is float's sister property, the element which is set to this property will adjust itself by clearing the adjacent floated elements. floated elements can affect the container elements height. As per your example which is "li" tag. overflow method is one of the technique to solve this problem. Read more about float here: https://css-tricks.com/all-about-floats/

what is the difference between 'overflow and clear to clear float?

2 Answers2