如何控制網站內元素的位置？

作者：佚名   時間：2014-03-19   分享到：

如何控制網站內元素的位置？
這里要提到HTMl網站css中的clear屬性

和<br>標簽的屬性一樣，clear屬性告訴瀏覽器把標簽的內容放置在與“浮動”元素相鄰的位置，還是放在下面的第一行。文本圍繞著浮動元素排列，如圍繞著具有align=left或align=right屬性的圖像和表格，或者任何float屬性被設置為除none以外的任何值的HTMl/XHTML元素來排列。

clear屬性的值可以是none/left/right和both。默認值none表示瀏覽器正常操作，把標簽的內容放置在與浮動元素任何一側相鄰的位置，前提是有足夠的空間來這么做。left值防止元素防止元素放置在浮動元素左側相鄰的位置；right防止把元素放置在浮動元素右側相鄰的位置；而both則禁止標簽內容與任何浮動元素相鄰。這種樣式的效果與用<br>標簽的clear屬性處理過的標簽效果一樣，因此：h1{clear:left}與用<br clear=left>處理每個<h1>標簽得到的效果一樣。

clip屬性

通常情況下，元素的內容在元素顯示空間內是完全可見的。clip屬性在元素的顯示空間內定義了一個瀏覽窗口，允許我們將不需要的元素隱藏起來，并將注意力集中在內容的某個區域或某方面上。

clip屬性的默認值auto，這意味著瀏覽窗口與該元素的框相匹配。相反，還可以在元素的顯示區域指定一個創建明顯的瀏覽器窗口的形狀。目前，CSS2支持的惟一一種形狀是矩形，這點是郵recet關鍵字表示的。例如：

p{overflow:hidden;

clip:rect(15px,-10px,5px,10px)}

4個值分別定義了剪切矩形的上、右、下和左邊緣。每個值都是相對于為元素定義的框邊繃而言的偏移量。因此，在這個示例中，剪切區域的上部低于元素框15像素，右邊緣距離框的右邊為10像素，下邊是框下部以上5像素，左邊級則距離框的左邊為10像素。

請注意，clip屬性只有在元素的overflow屬性設置為visible以外的某個值時才會生效。當overflow設置為visible時，不會發生剪切，clip屬性將被忽略。

float屬性

float屬性將標簽的顯示空間指定為一個浮動元素，并使文本按一定方式環繞它排列。總的說來，它與圖像和表格的align屬性類似，但可以用到任何元素上，包括文本、圖像和表格中。

float屬性按受以下三個值之一：left、right和none(默認值)。none表示禁用float屬性。其他值則與align屬性值一樣，告訴瀏覽器把文本按某一側對齊，并允許其他內容與之相鄰。

困此，瀏覽器將把指定為“float: left”的標簽內容（包括其邊界、補白和邊框）靠著當前文本流的左邊界排列，以后的內容將流向它的右面，并在標簽文本的下面。“float: right”則把標簽內容放在文本流的右邊，使得其他內容流動到左面，在標簽內容的下面。

雖然主要是用于表格和圖像，但把float屬性應用到文本元素上也是很合適的。例如，下面的示例將創建一個“淅入”標題，正文圍繞著標題文字流動

h2{float:left;

text-align:center;

margin-right:10px} 瀏覽器都支持這個屬性