技術標籤：CSS筆記csshtml

為什麼要浮動？
塊級元素往往獨自佔一行的位置，如果我們想要兩個、三個甚至多個塊級元素在一行上顯示怎麼辦？
這時候我們就要用到浮動float，float浮動後塊級和塊級之間是緊緊挨著的，不會有間距存在，而inline-block雖然也能在一行顯示，但中間會有間距存在，且不好去除。

<style>
.one {
	float:left;
	width:200px;
	height:200px
	background-color:skyblue;
}
.two {
	float:left;
	width:200px;
	height:200px
	background-color
 
:yellowgreen;
}
</style>
<div class="one"></div>
<div class="two"></div>

上面的兩個div塊級元素就會在一行上顯示，因為當一個元素浮動後，它就相當於漂浮了起來，是不佔有位置的，那麼後面的div就會佔有新增浮動元素的位置，當給後面的元素也新增浮動後，兩個div都漂浮了起來，就會在同一行上顯示。
tips：在一個盒子內，不浮動就都不浮動，要浮動就都浮動。

清除浮動的本質是什麼？
清除浮動主要就是為了解決父級元素因為子元素浮動而引起內部高度為0的問題，清除浮動後，父級就會根據浮動的盒子自動檢測高度，父級有了高度，就不會影響下面的標準流了。（沒有新增浮動屬性的就是標準流）

清除浮動有哪些方法？
CSS中，clear屬性用語清除浮動。
實際開發中我們用clear:both;最多。表示同時清除左右兩側的浮動。
清除浮動其實有好幾種方法，我就寫用的最多的吧。
使用after偽元素清除浮動

<style>
.clearfix { /* ie6和ie7不支援:after*/
	content:"";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}
.clearfix {
	*zoom:1; /*專門為ie6和ie7清除浮動的方法*/
}
</style>

建立好清除浮動樣式後，給父元素新增該方法就可以清除浮動樣式了。（這個方法不用記住，知道怎麼用就可以了，遇到需要清除浮動的問題知道用這個可以解決）