[分享]css东西被挤下去

在网页布局中，常常会出现CSS东西被挤下去的情况。这种情况的出现通常是由于元素的相互作用引起的。比如说，当文本溢出其容器元素时，会发生 CSS 盒子的尺寸塌陷，导致周围的元素被挤下去。 .contai...

在网页布局中，常常会出现CSS东西被挤下去的情况。这种情况的出现通常是由于元素的相互作用引起的。比如说，当文本溢出其容器元素时，会发生 CSS 盒子的尺寸塌陷，导致周围的元素被挤下去。

 .container {
      height: 100px;
      width: 100px;
      overflow: hidden;
      background-color: lightgrey;
    }
    
    .text {
      width: 120px;
      height: 120px;
      background-color: white;
      padding: 10px;
    } 

在上面的代码中，我们创建了一个容器元素（class="container"）和一个内部元素（class="text"）。容器元素的高度和宽度都是100px，但它的 overflow 属性被设置为 hidden。这意味着任何溢出该容器元素的内容都将隐藏。

我们的内部元素（class="text"）宽度和高度都大于容器元素。当我们向该元素添加一些文本时，它的尺寸将自动扩展以适应内容。因此，它会溢出容器元素，并导致 CSS 盒子的尺寸塌陷，让周围的元素被挤下去。

 <div class="container">
      <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac bibendum quam.
      </div>
    </div> 

解决此问题的一种方法是使用 overflow 属性的 auto 值。这将强制容器元素的内容自动滚动，并始终保持在容器边界内。

 .container {
      height: 100px;
      width: 100px;
      overflow: auto;
      background-color: lightgrey;
    } 

这样，在容器元素溢出时，文本将自动滚动，并不会引起尺寸塌陷并挤下其他元素。

由此可见，当 CSS 元素之间发生相互作用时，常常会导致诸如尺寸塌陷和被挤下的问题。通过了解 CSS 盒模型和元素相互作用的基本原理，我们可以更好地管理和解决这些问题，从而创建出更优秀的网页布局。