CSS overflow: hidden的例子

最新推荐文章于 2024-07-16 12:36:21 发布

前端zhoufx

最新推荐文章于 2024-07-16 12:36:21 发布

阅读量648

点赞数 2

分类专栏： web前端文章标签： css web前端

本文链接：https://blog.csdn.net/zhoufuxinzfx/article/details/50866781

版权

web前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

初学web前端，看到一些教程对overflow: hidden;的描述是隐藏溢出，但实际运用中，却发现不仅仅是字面意义上那么简单。

网上查到一些资料说overflow: hidden;还有清除浮动的效果，于是在这里尝试了一下
例子代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8"/>
  <title></title>
  <style type="text/css">
  #bigbox {
    width: 400px;
  }
  #box1 { 
    width:80px; 
    height: 80px;
    background:#000; 
    border: 1px solid #CCC;
    float: left;
  } 
  #box2 { 
    /*overflow: hidden;*/
  } 

  #box2 .content { 
    float: left;
    border: 1px solid #CCC;
    width:80px; 
    height:80px; 
    background: #FF7400;
  } 
  </style>
  </head>
  <body>
    <div id="bigbox">

      <div id="box1"></div>

      <div id="box2">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
      </div>
    </div>
  </body>
</html>

效果如下：
这里写图片描述

如果将box2的CSS样式加入overflow: hidden; 效果如下：
这里写图片描述

至于用途嘛：像一些导航栏，比如JD的

这里写图片描述

分析：

  橙方块的父元素 没有 overflow的时候，黑方块和橙方块都是左浮动，按照浮动的规则排列；

  橙方块的父元素 加入 overflow的时候，会触发BFC，就是块级元素布局的一套规则，其中最重要的一点，
BFC内部元素对外不造成影响，于是本例中，内部所有橙方块的浮动不会超出BFC父元素。

  当然BFC还有其他很多规则和触发条件，可以围观其他大神的讲解。

前端zhoufx

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS overflow: hidden的例子

初学web前端，看到一些教程对overflow: hidden;的描述是隐藏溢出，但实际运用中，却发现不仅仅是字面意义上那么简单。网上查到一些资料说overflow: hidden;还有清除浮动的效果，于是在这里尝试了一下例子代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <title></title> <style
复制链接

扫一扫

专栏目录