overflow清除浮动的真正原因
来源:互联网 发布:数控车床编程实例简单 编辑:程序博客网 时间:2024/06/05 03:37
转至http://www.cnblogs.com/ZengYunChun/p/7068786.html
1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动
1 <!DOCTYPE html> 2 <html> 3 <style> 4 * { 5 margin: 0; 6 padding: 0; 7 } 8 ul { 9 list-style-type: none;10 overflow: hidden;11 background-color: #333;12 }13 li {14 float: left;15 }16 li a {17 display: block;18 color: red;19 text-align: center;20 padding: 14px 16px;21 text-decoration: none;22 }23 </style>24 <meta charset="utf-8">25 <body>26 <ul>27 <li><a class="active" href="#home">Home</a></li>28 <li><a href="#news">News</a></li>29 <li><a href="#contact">Contact</a></li>30 <li><a href="#about">About</a></li>31 </ul>32 </body>33 </html>
2.出现如下显示, 宽度为浏览器宽度
3. 去掉overflow: hidden后, 可以看到
(尾巴在这儿)
4. 为什么去掉ul去掉overflow: hidden之后没在了, 其实不是没在了, 看到由于没有设置高度, height: auto为自动值, 就是根据里面的内容自动设置高度, 但是li设置了左浮动, 已经浮动起来了属于浮动流, 不在普通流中, 但是ul还是在普通流, 他普通流中的内容为空, 所以没有高度.
5. 做个实验, 去掉ul的overflow: hidden后, 在里面加入一个普通流的<span>, 可以看到下面效果, ul的高度就是span撑起来的高度
1 <ul>2 <span style="color:white">我是普通流</span>3 <li><a class="active" href="#home">Home</a></li>4 <li><a href="#news">News</a></li>5 <li><a href="#contact">Contact</a></li>6 <li><a href="#about">About</a></li>7 </ul>
6. 绕了一圈, 回到正题, 首先说下overflow的意思: 属性规定当内容溢出元素框时发生的事情, w3school解释如下, 简单的说hidden 的意思是超出的部分要裁切隐藏掉
7. 那么如果 float 的元素li不占普通流位置,
普通流的包含块ul设置了overflow: hidden要根据内容高度裁切隐藏,
并且ul高度是默认值auto, 那么不计算其内浮动元素高度就裁切就有可能会裁掉float的li
这是反布局常识的
所以如果没有明确设定容器ul高情况下
它要计算内容全部高度才能确定在什么位置hidden
浮动流的高度就要被计算进去, 就是li的高度,
一计算进去就顺带达成了清理浮动的目标
- overflow清除浮动的真正原因
- overflow:hidden可以清除浮动原因
- CSS的overflow属性及清除浮动
- CSS overflow清除浮动
- overflow清除浮动
- overflow:hidden;清除浮动
- overflow清除浮动
- overflow 清除浮动
- css overflow:hidden 清除浮动
- overflow:hidden清除浮动原理
- overflow:hidden清除浮动原理
- 清除浮动影响与overflow
- 增加css的overflow属性来清除浮动
- 对overflow与zoom”清除浮动”的一些认识
- 纠结的 hasLayout与overflow:hidden --- 清除浮动之谜
- 对overflow与zoom”清除浮动”的一些认识
- 兼容性好的overflow CSS清除浮动一例
- 对overflow与zoom”清除浮动”的一些认识
- 1040. 有几个PAT(25)
- LeetCode.189 Rotate Array
- add string
- Unicode 和 UTF-8 有何区别? 理解字符集
- Java:类型转换案例(上)
- overflow清除浮动的真正原因
- 游戏‘微信打飞机’ 第三课
- ios_placeholder 属性与按钮倒计时功能
- 10_0类型的意义
- LeetCode.54(59) Spiral Matrix && II
- TCP三次握手与四次挥手的理解和场景举例
- 1. Two Sum
- Android VideoView播放视频只有声音没有图像黑屏
- log4j,logback,sl4j常用日志格式详解