float溫習（1）
溫習float屬性，但是可以用flex的話，就不怎麽使用float，但是float仍然使用頻繁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding :0;
margin :0;
}
#ul{
width: 200px;
height: 150px;
list-style: none;
background-color: #6f6;
float: left;
/*display: none;*/
}
#ul>li{
background-color: green;
border-bottom: 1px solid #888;
}
#div{
width: 300px;
height: 150px;
background-color: #967;
float: left;
}
#div.second{
display: flex;
justify-content: space-around;
}
#div.second>a{
align-items: center;
flex-direction: column;
background-color: hotpink;
}
</style>
</head>
<body>
<ul id="ul">
<li>測試</li>
<li>測試</li>
<li>測試</li>
<li>測試</li>
</ul>
<div id="div">
<div class="second">
<a href="">測試a標簽</a>
<a href="">測試a標簽</a>
<a href="">測試a標簽</a>
</div>
<div class="second">
<a href="">測試a標簽</a>
<a href="">測試a標簽</a>
<a href="">測試a標簽</a>
</div>
<div class="second">
<a href="">測試a標簽</a>
<a href="">測試a標簽</a>
<a href="">測試a標簽</a>
</div>
</div>
<p style="width: 100px;height:100px;border:1px solid #000;float: right;">111</p>
<p style="width: 100px;height:100px;border:1px solid #000;float: right;">222</p>
<p style="width: 100px;height:100px;border:1px solid #000;float: left;">333</p>
<p style="width: 100px;height:100px;border:1px solid #000;">這個未浮動，仍在文檔流裏面，被浮動的元素覆蓋，但是浮動有一個特點，文字會盡量顯現，不被遮蓋</p>
</body>
</html>
float設計的初衷是為了讓文字環繞，但是float會造成父元素塌陷的現象，濫用浮動和定位會造成讓你崩潰的效果，所以慎用
對於浮動造成的父元素塌陷解決方法有以下幾種
最優如下：
.clearfix:after
{
content: ‘‘;
display: table;
clear: both;
}
.clearfix
{
*zoom: 1;
}
ie7及其以下的浮動有讓人淚崩的效果，由於未曾做到兼容到那麽久遠，而且研究不夠深刻，所以待以後再來補充。float溫習（1）