.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. JavaScript在执行代码之前会校验代码，声明变量提前至当前作用域最前面。

    var name = 123; function getName(){ console.log(name); } getName(); 输出123 -------------------------- ...

  2. Delphi UniDAC 通过http协议连接数据库的设置

    Connection through HTTP tunnel(using http protocol) Sometimes client machines are shielded by a fire ...

  3. 算法（Algorithms）第4版 练习 2.2.5

    top-down: M E R G E S O R T E X A M P L E M E R G E S O R T E X A M P L E E X A M P L E merge(input, ...

  4. Shiro-自定义realm

    Shiro自定义 realm package com.zhen.realm; import org.apache.shiro.authc.AuthenticationException; import ...

  5. jquery的ajax（err）

    load()方法 load()方法是jquery中最为简单和常用的ajax方法. 直接使用ajax技术的流程 1.创建xmlhttprequest对象 2.调用open函数("提交方式&qu ...

  6. php构造函数的继承方法

    第一种情况:子类没有定义构造函数时,默认继承.例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 <?php class A{  public $name;  function _ ...

  7. 代码题（3）— 最小的k个数、数组中的第K个最大元素、前K个高频元素

    1.题目:输入n个整数,找出其中最小的K个数. 例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4. 快排思路(掌握): class Solution { public ...

  8. 关于c++中char*、char ch[]和string区别

    一.字符串指针: char* ch="hello"; 这里的"hello"是字符串常量,是不可以改变的,即通过ch[0]="s"会编译出错. ...

  9. 利用bootsrap控件 实现文件上传功能

    源代码实例:https://github.com/kartik-v/bootstrap-fileinput 一.jsp页面 <%@ page language="java" ...

  10. java中变量的分类

    •按被声明的位置划分: –成员变量:方法外部.类的内部定义的变量 –局部变量:方法或语句块内部定义的变量        –注意:类外面(类对应的大括号外面)不能有变量的声明 •按所属的数据类型划分: ...