.top-nav{

                font-size: 12px;

                font-weight: bold;

                list-style-type: none;

                border-bottom: 8px solid #DC4E1B;

                overflow: auto;/*hidden与auto的效果一样*/

                /*不是用来控制溢出，而是用来清除浮动，不是在该元素上清除浮动，而是清除自己*/

                /*应用了overflow的元素，扩展到他需要的大小，以包围他里面浮动的子元素*/

            }

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

  1. overflow:auto/hidden的应用

    一.自适应两栏布局 <!DOCTYPE html><html lang="zh-CN"><head> <meta charset=&quo ...

  2. overflow:hidden清除浮动原理

    overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.

  3. 为什么设置overflow为hidden可以清除浮动带来的影响

    1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...

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

    常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <met ...

  5. 详解为什么设置overflow为hidden可以清除浮动带来的影响

    1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...

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

    最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...

  7. CSS 的overflow:hidden (清除浮动)

    verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...

  8. overflow:auto学习

    一直认为没认为这个属性没什么大的用处,最近在使用一次iscroll时一直浮动到顶部层上面找了半天,发现可以用这个属性解决. 1.功能1,清除浮动.设置overflow并不会在该元素上清除浮动,它将清除 ...

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

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

随机推荐

  1. c的详细学习（5）数组

        到目前为止,前面介绍的都是属于基本类型的数据.除此之外,C语言还提供了一些更为复杂的数据类型,称为构造类型.数组就是最基本的构造类型.若要针对一批数据进行某种操作,采用数组是一种方便可行的方法 ...

  2. 视图的创建与使用 Sql Server View

    创建教材的三个数据表Student.Course及SC. create database S_T Use S_T CREATE TABLE Student (Sno CHAR(9), Sname CH ...

  3. [原创]java WEB学习笔记03：使用eclipes开发javaWEB项目

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  4. web框架详解之tornado 二 cookie

    一.tornado之cookie一 目录: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. 手撸IoC

    Ioc的实现 可以把IoC模式看作是工厂模式的升华,可以把IoC看作一个大工厂,只不过这个大工厂里要生成的对象都是XML文件中给出定义的,然后利用Java的反射变成,根据XML中给出的类名生成相应的对 ...

  6. EntityFramework 学习 一 Delete Entity using DBContext in Disconnected Scenario

    Student studentToDelete; . Get student from DB using (var ctx = new SchoolDBEntities()) { studentToD ...

  7. zookeeper 配置文件注释

    tickTime=2000 initLimit=5 syncLimit=2 dataDir=/opt/shencl/zookeeper/data/data0 dataLogDir=/opt/shenc ...

  8. 大话设计模式--装饰者模式 Decorator -- C++实现实例

    1.装饰者模式 Decorator 动态地给一个对象添加一个额外的职责, 就添加功能来说, 装饰模式比生成子类更为灵活. 每个装饰对象的实现和如何使用这个对象分离,  每个装饰对象只关心自己的功能,不 ...

  9. wiredtiger存储引擎介绍——本质就是LSM，当然里面也可以包含btree和列存储

    见:http://www.slideshare.net/profyclub_ru/4-understanding-and-tuning-wired-tiger-the-new-high-perform ...

  10. C 字节对齐.我的算法学习之路

    C/C++基础笔试题1.0(字节对齐) http://blog.csdn.net/dengyaolongacmblog/article/details/37559687 我的算法学习之路 http:/ ...