overflow清除浮动的真正原因及其他清除浮动的方式
转至http://www.cnblogs.com/ZengYunChun/p/7068786.html
一：overflow：hidden清除浮动
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的高度,
一计算进去就顺带达成了清理浮动的目标
二：伪元素清除浮动：
1:利用伪元素：html元素::after也可以进行清除浮动，但是记住要让伪元素为块级元素才能清除浮动，不然的话行内元素是没有办法清除浮动的
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
.box::after{
/*
伪元素设置为块元素才能清除浮动
*/
display: block;
clear: both;
content: "";
}
.l,.r{
width: 200px;
height: 200px;
float: left;
}
.l{
background: red;
}
.r{
background: blue;
}
.d{
width: 400px;
height: 400px;
background:green;
}
</style>
</head>
<body>
<!--
清除浮动的overflow方式
<div class="box">
<div class="l"></div>
<div class="r"></div>
</div>
<div class="d">
</div> -->
<!--
清除浮动的第二种方式伪元素清除浮动
-->
<div class="box">
<div class="l">
</div>
<div class="r">
</div>
</div>
<div class="d">
</div>
</body>
</html>1：示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
.clear{
/*
clear清除左右浮动
*/
clear:both;
}
.l,.r{
width: 200px;
height: 200px;
float: left;
}
.l{
background: red;
}
.r{
background: blue;
}
.d{
width: 400px;
height: 400px;
background:green;
}
</style>
</head>
<body>
<!--
清除浮动的overflow方式
<div class="box">
<div class="l"></div>
<div class="r"></div>
</div>
<div class="d">
</div> -->
<!--
清除浮动的第三种方式div clear清除浮动
-->
<div class="l">
</div>
<div class="r">
</div>
<div class="clear">
</div>
</body>
</html>上一篇： PS制作一枚逼真的一元硬币
下一篇： Fn键怎取消？笔记本Fn键锁定方法