css 中 overflow: hidden清楚浮动的真正原因
1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动
<!DOCTYPE html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: red;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>
<meta charset="utf-8">
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
2.出现如下显示, 宽度为浏览器宽度
3. 去掉overflow: hidden后, 可以看到
(尾巴在这儿)
4. 为什么去掉ul去掉overflow: hidden之后没在了, 其实不是没在了, 看到由于没有设置高度, height: auto为自动值, 就是根据里面的内容自动设置高度, 但是li设置了左浮动, 已经浮动起来了属于浮动流, 不在普通流中, 但是ul还是在普通流, 他普通流中的内容为空, 所以没有高度.
5. 做个实验, 去掉ul的overflow: hidden后, 在里面加入一个普通流的<span>, 可以看到下面效果, ul的高度就是span撑起来的高度
<ul>
<span style="color:white">我是普通流</span>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
6. 绕了一圈, 回到正题, 首先说下overflow的意思: 属性规定当内容溢出元素框时发生的事情, w3school解释如下, 简单的说hidden 的意思是超出的部分要裁切隐藏掉
7. 那么如果 float 的元素li不占普通流位置,
普通流的包含块ul设置了overflow: hidden要根据内容高度裁切隐藏,
并且ul高度是默认值auto, 那么不计算其内浮动元素高度就裁切就有可能会裁掉float的li
这是反布局常识的
所以如果没有明确设定容器ul高情况下
它要计算内容全部高度才能确定在什么位置hidden
浮动流的高度就要被计算进去, 就是li的高度,
一计算进去就顺带达成了清理浮动的目标
css 中 overflow: hidden清楚浮动的真正原因的更多相关文章
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- 转：css中overflow:hidden 不起作用了吗？
css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...
- CSS中overflow:hidden
CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...
- CSS 的overflow:hidden (清除浮动)
verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...
- 关于css中overflow:hidden的使用
overflow:hidden有两个用处经常用到: 1.通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容: 但是,小编在以往的使用中,发现了一个问题,只要父级容 ...
- 对CSS了解-overflow:hidden
overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...
- CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了
浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
- CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
随机推荐
- 简明python教程五----数据结构（下）
引用 当你创建一个对象并给它赋一个变量的时候,这个变量仅仅引用那个对象,而不是表示这个对象本身!即,变量名指向你计算机中存储那个对象的内存. print 'Simple Assignment' sho ...
- ［Mysql ］TIME ZONE
mysql的时间相关的类型如下: 1. timestamp 时区敏感的 2. date 非时区敏感 3. datetime 非时区敏感 4. time 非时区敏感
- POJ_2533 Longest Ordered Subsequence【DP】【最长上升子序列】
POJ_2533 Longest Ordered Subsequence[DP][最长递增子序列] Longest Ordered Subsequence Time Limit: 2000MS Mem ...
- hdu 1686 Oulipo kmp算法
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=1686 题目: Problem Description The French author George ...
- c#基础-自动内存管理
1.自动垃圾回收是什么? 在非托管环境下程序员要自已管理内存,由疏忽的原因,通常会犯两种错误,请求内存后在不使用时忘记释放,或使用已经释放了的内存.但在托管环境下,程序员不用担心这两个问题,C ...
- 【Python】常用内建模块（卒）
内容来自廖雪峰的官方网站 笔记性质 1.datetime 2.collections 3.base64 4.struct 5.hashlib 6.itertools 7.contextlib 8.XM ...
- CentOS限制SSH登录地址
编辑hosts.allow文件,将允许连接的地址写进去 [root@Elements ~]# vim /etc/hosts.allow sshd:10.10.10.1:allow sshd:172.1 ...
- MongoDB快速入门（十三）- 聚合count、distinct和group
1. count: --在空集合中,count返回的数量为0. > db.test.count() 0 --测试插入一个文档后count的返回值. > d ...
- centos 安装 mysql-5.7.23-linux-glibc2.12-x86_64.tar.gz 详细步骤
1.卸载Linux系统上自带的mysql插件(old版本) 查找mysql相关安装: rpm -qa|grep -i mysql 可能会出现以下的一个或多个,没有更好,说明你的系统很干净,但是以防万一 ...
- BI项目中的ETL设计详解（数据抽取、清洗与转换 ）（转载）
原文:http://www.cnblogs.com/reportmis/p/5939732.html ETL是BI项目最重要的一个环节,通常情况下ETL会花掉整个项目的1/3的时间,ETL设计的好坏直 ...