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;
}

我们经常使用下面的类来清除'浮动';

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

有时，我们只能使用'溢出'，这可以解决我们的问题。

'溢出'和'清除'之间有什么区别？

code about this question

Answer 1

自overflow和clear以来的奇怪比较完全不相关。除非我误解了你的问题。在这种情况下，请重新说明，以便我们能够更好地澄清。

无论如何，溢出控制元素宽度之外的任何多余部分。

overflow属性指定内容溢出元素框时会发生什么。

如果您有一个包含大图像的div，并且您希望将图像限制为不超过该容器的宽度，则溢出将通过赋予它hidden值来实现。如果您希望它在某个宽度或高度后滚动，scroll值将激活滚动条以允许您这样做。

另一方面，

Clear重置浮动。

clear属性指定不允许浮动元素的哪一侧浮动。

这在响应式设计中特别有用，可以将已放置在较大显示器中的项目居中，但您希望将其重置为较小设备的原生左侧位置。当然，clear的使用可以根据您的需要通过其他因素来确定。

上面提到的例子看起来像这样

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

CSS

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

Answer 2

在您的示例中，您在＆＃34; li＆＃34;内部浮动了元素（＆＃34;按钮＆＃34;）。＆＃34;清除＆＃34;是float的姐妹属性，设置为此属性的元素将通过清除相邻的浮动元素来自行调整。浮动元素可以影响容器元素的高度。根据你的例子，＆＃34; li＆＃34;标签。溢出方法是解决这个问题的技术之一。在此处阅读有关浮动的更多信息：https://css-tricks.com/all-about-floats/

'溢出和清除浮动之间有什么区别？

2 个答案: