南寧小程序開發,挑戰百日學習計劃第24天（float的理解)

float理解

南寧小程序開發：www.zkelm.com

float浮動規則：向指定方向移動。直到碰到包含它的元素(父元素)或則，同樣float元素的邊框，
1.如果元素浮動則不會佔空間，block 塊狀元素將會失去block的屬性，變成inline-block屬性。因爲可以設置寬高，但以absolute的不佔空間不同，float會影響周邊元素

如果float元素前面的非block元素， 而且在同一行.則浮動會影響到前面的元素，把它積到後面非BLOCK的邊上

<style>
.box{
width:400px;
height:200px;
background:#e0e0e0;
}
.item{width:100px;height:100px;background:#f55;float:left}
</style>
<div class="box">
<span>我被擠到後面了！！！</span>
<div class="item"></div>
</div>

結果顯示：

理解：float的主要是爲了解決。圖片旁邊的文字圍繞問題，

最常用的float方法：

<ul>
<li>主頁</li>
<li>新聞</li>
<li>產品</li>
<li>幫助</li>
</ul>

*{margin:0;padding:0;}
		  ul{
			  width:325px;
			  height:auto;
			  background:#e0e0e0;
		  }
		  ul:after {
			  content:"";
			  display: block;
			  clear:both;
		  }
		  ul li{
			  float:left;
			  list-style-type:none;
			  width:80px;
			  height:40px;
			  background:#f1f1f1;
			  border-left-style:solid ;
			  border-width:1px;
			  border-color:#666;
			  text-align:center;
			  line-height:40px;
			  
		  }
		  ul li:hover{
			  background:pink;
			  color:#f55;
			  border-color:#f55;
			  content:"hello!!!";
		  }
		  ul li:last-child{
			  border-right-style:solid;
		  }

運行結果：