关于CSS中浮动引发的特殊情况，“大坑”
浮动引发的特殊情况
一、换行显示
1、当父元素显示不下所有浮动元素时，显示不下的后面的元素会换行显示
<!doctype html>
<html >
<head>
<title></title>
<meta charset="UTF-8">
<style>
div{width:200px;height:100px;}
#d1{
height:150px;
background:#f00;
float:left;
}
#d2{
background:#ff0;
float:left;
}
#d3{
background:#0f0;
float:left;
}
#d4{background:#f0f;float:left;height:300px;}
#d5{background:#afa;float:left;}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
</body>
</html>
本来5号元素应该在6号位置，但是因为缩小浏览器宽度，所以换行显示到下一行。
2.元素优先网页面顶部上浮，然后再向左/右对齐。
当前面的1、2、3、或四号元素的高度变大时，css代码如下：
div{width:200px;height:100px;}
#d1{background:#f00;float:left;height:160px;}
#d2{background:#ff0;float:left;}
#d3{background:#0f0;float:left;}
#d4{background:#f0f;float:left;}
#d5{background:#afa;float:left;}
5号元素没有出现在1号元素下面，而是2号元素的下面
3、浮动元素占位：浮动元素会根据浮动的方向，占据对应方向上的位置，不让后面的元素占用。
比如，把四号元素的高度设为300px，代码和效果如下：
div{width:200px;height:100px;}
#d1{background:#f00;float:left;height:160px;}
#d2{background:#ff0;float:left;}
#d3{background:#0f0;float:left;}
#d4{background:#f0f;float:left;height:300px;}
#d5{background:#afa;float:left;}
4号元素占据了它本身及其左边的所有位置，所以5号只能占据如图所示的“big”位置（请自行尝试当4号元素右浮动时的效果）
二、元素一旦浮动，如果没有自定义宽度，其宽度由内容决定
我们知道，如果我们不是指子块级元素的宽度，其宽度默认是父级元素宽度的100%。
<!doctype html>
<html >
<head>
<title></title>
<meta charset="UTF-8">
<style>
p{
height:100px;border:2px solid red;
}
</style>
</head>
<body>
<p>abbvbv</p>
</body>
</html>
给p标签加上浮动：
可以看到，p标签的宽度变小了，其宽度有其内容决定。
三、行内元素加浮动
我们知道，行内元素不能设置宽高和上下外边距（img、input除外），如下：
宽高和上下外边距不起作用
<style>
span{
height:100px;
width:300px;
border:2px solid red;
margin:50px;
}
div{
width:700px;
height:300px;
border:2px solid #ff0;
}
</style>
</head>
<body>
<div><span>好嗨呦，感觉人生已经达到了巅峰</span>
<span>好嗨呦，感觉人生已经达到了巅峰</span></div>
</body>
我们给span加左浮动
span{
height:100px;
width:300px;
border:2px solid red;
margin:50px;
float:left;
}
看到，margin和宽高都其作用了。
四、环绕效果
文本，行内元素，行内块是不会被浮动元素压在下方。
而是巧妙的避开了所有浮动元素，环绕着浮动元素显示。
五、高度坍塌
块级元素的高度如果不设置，高度以内部元素内容为准
但是如果内部元素都是浮动元素，浮动元素不占据页面空间
父元素的高，没有了。
解决方案
1.直接为父元素设置高度
弊端：不知道父元素高度怎么办？！
2.父元素也浮动
弊端：浮动会影响后续元素
3. overflow:hidden/auto;（加载父元素）
弊端：当元素真的需要显示溢出内容的时候，就显示不出来了
4.在父元素中追加一个空的块级元素，并且设置clear:both;
上一篇： Neutron的Port详解
下一篇： 深入理解join()方法