【总结整理】overflow: auto/hidden;清除自己

.top-nav{
                font-size: 12px;
                font-weight: bold;
                list-style-type: none;
                border-bottom: 8px solid #DC4E1B;
                overflow: auto;/*hidden与auto的效果一样*/
                /*不是用来控制溢出,而是用来清除浮动,不是在该元素上清除浮动,而是清除自己*/
                /*应用了overflow的元素,扩展到他需要的大小,以包围他里面浮动的子元素*/
            }

原文地址:https://www.cnblogs.com/lianghong/p/8353594.html

时间: 2024-10-01 23:22:50

【总结整理】overflow: auto/hidden;清除自己的相关文章

overflow:auto/hidden的应用

一.自适应两栏布局 <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>自适应两栏布局</title> <style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float:

CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}

常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { font: 36px bold; c

overflow:hidden清除浮动原理解析及清除浮动常用方法总结

最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想想 我们大家理解的overflow:hidden是超出该元素的部分进行隐藏.这个时候就需要明确一点,该元素的高度是怎么定义的.当一个div中的两个元素浮动之后,此时div的高度就会塌陷,此时div的高度为0.那是不是意味着就要将浮动元素隐藏起来,如果是真的隐藏就是反布局常识的.所以这中间肯定有我们现在还不知道

CSS 的overflow:hidden (清除浮动)

verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的. verflow:hidden清除浮动,例如如下:(样式box div是样式content div的父元素) .box{           background:#000;           width:300px;        

css overflow(visible auto hidden scroll)教程

DIV CSS overflow (visible auto hidden scroll)语法结构与css overflow教程 Overflow可以实现隐藏超出对象内容,同时也有显示与隐藏滚动条的作用,接下来我们来了解学习css overflow样式.一.Overflow语法值 - TOP overflow : visible | auto | hidden | scroll 当然overflow可以单独设置X(overflow-x )和Y(overflow-y)方向的滚动条样式其值与应用与o

小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,妇女之友大淘宝的首页: 然而,这种布局有一个存在一个影响用户体验的隐患.应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下p

IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题探讨

IE的每次跟新都会有一些奇葩的bug,我们默默承受了. 这个问题在项目中出现困扰了我近一个星期,这里记录一下.看下面实例 <style> .panel{ width: 200px; overflow: auto; background-color: #f00; } .inner{ width: 250px; background-color: #ff0; } </style> <div class="panel"> <div class=&qu

overflow:hidden真的失效了吗?

UINavigationController的使用步骤 1.初始化UINavigationController 2.设置UIWindow的rootViewController为UINavigationController 3.根据具体情况,通过push方法添加对应个数的子控制器 UINavigationController的自控制器 UINavigationController以栈的形式保存子控制器 @property(nonatomic,copy) NSArray *viewControlle

mobile safari下 overflow:auto无效的解决方法

1.在CSS文件加上一下代码: ::-webkit-scrollbar { -webkit-appearance: none;       /*可去除系统默认的样式*/ width: 7px;                           /*滚动条宽度*/}::-webkit-scrollbar-thumb {    /*当焦点不在当前区域滑块的状态*/ border-radius: 4px; background-color: rgba(0,0,0,.5); -webkit-box-s