.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. Kattis - fire2 【BFS】

    第二组样例: 题意 给出一个起始位置,然后要跑到这幢建筑物的外面,上下左右四个方向,只要是空地 就可以走 走一步 花费一秒 然后有若干串火苗,每一秒钟 会向上下左右 四个方向的空地 蔓延 但是 逃跑的 ...

  2. iOS 图文混排 链接 可点击

    对于这个话题 我想到 1 第一个解决方法就是使用 webView 比较经典 把所有复杂工作都交给控件本身去处理了,  但是好像好多需要自定义的地方 没法从 webView获得响应回调 :(估计也可以实 ...

  3. 第二章 python中重要的数据结构(下)

    二.元组(tuple):不可变序列 跟list一样,也是一种序列,唯一不同的是,元组元素不能被修改,通常用(, ,)表示元组,也可以不加括号. #创建元组 >>> 1,2,3 (1, ...

  4. P3506 [POI2010]MOT-Monotonicity 2

    题目 P3506 [POI2010]MOT-Monotonicity 2 第一次切掉没题解的题\(qwq\) 做法 首先确定\(a_i\)的位置后显然就能确定\(a_{i+1}\)的位置,建一棵权值线 ...

  5. Vue-Quill-Editor回显不显示空格的处理办法

    我自己在用VUE做一个博客网站,查了一下好多人都在用Vue-Quill-Editor,于是我也把这个插件加入到我的程序里,可是后来却出现了个问题,如图: 简单的代码如下: <template&g ...

  6. Spring Cloud之网关

    接口的分类: 开放接口:可以授权一些接口口OAuth2.0协议方式  第三方联合登录 内部接口:  一般只能在局域网中进行访问,服务与服务之间关系都在同一个微服务系统中.目的是为了保证安全问题 接口设 ...

  7. kafka常用的shell命令

    kafka常用shell命令: ------------------------------------ 1.创建topic bin/kafka-topics.sh --create --zookee ...

  8. Future模式实例

    Future模式 /** * qccr.com Inc. * Copyright (c) 2014-2016 All Rights Reserved. */ package com.youqianhu ...

  9. jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的AP ...

  10. python基础-变量

    1.什么是变量? 其实就是给数据起个名字而已.在python中你不想要关心数据类型,因为在你赋值的时候它已经自己帮你识别了 2.创建变量时候会在内存中开辟一个空间,具体的细节不需要咱们关心,解释器会分 ...