CSS 左侧固定+overflow:hidden的作用

 

 

左侧固定，右边自动占满

 

 

<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
    overflow:hidden;
    background-color:lightskyblue;
  }
</style>
 
<div class="left">左边固定宽度</div>
 
<div class="right">右边自动填满</div>

可能你会疑惑右边为什么自动填满？

 

因为“float:left;”浮动位置实在左边，然后下一个div标签元素试图占有“left”div的空间，但发现“left”是占据的空间，所以就紧接着它咯。

 

下面探究下

overflow:hidden  这句话的作用

我在right那个类里加一个属性

height:100px

 

接着，把overflow:hidden  这句去掉

它的用途是清除浮动.

右边高度大于左边，填充背景色可以清楚观察到右边的背景溢到了左边，overflow字面理解就是溢出当前浮动的，hidden就是隐藏