当前位置: 代码迷 >> 综合 >> overflow:hidden属性的用法(margin-top的传递问题、清除浮动)
  详细解决方案

overflow:hidden属性的用法(margin-top的传递问题、清除浮动)

热度:20   发布时间:2024-02-08 11:45:46.0

overflow:hidden

第一种用法:解决margin-top的传递问题

(margin-top的传递问题:子元素的margin-top会把父元素一起带下来)

解决方案扩展:

       给父元素加overflow:hidden

       给父元素加浮动

       给父元素加定位absolute/fixed

       给父元素加display:inline-block

       给父元素加border-top

       给父元素加padding-top

第二种用法:清除浮动带来的影响 --- 父元素高度塌陷

       overflow:hidden

       clear:both

万能清除法:给需要清除浮动的元素命名 class="clearfix"  并在CSS样式中加入以下代码

                    .clearfix:after{

                               content:" ";

                               display: block;

                               clear: both;

                               height: 0;

                               overflow: hidden;

                               visibility: hidden;

                   }

第三种用法:显隐动画 --- 超出隐藏

第四种用法:单行文本超出省略

       white-space:nowrap;

       overflow:hidden;

       text-overflow:ellipsis;

       width:;

  相关解决方案