搜索
您的当前位置:首页正文

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

来源:爱go旅游网

 

 

左侧固定,右边自动占满

 

 

<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就是隐藏

因篇幅问题不能全部显示,请点此查看更多更全内容

Top