網頁浮動的解析

來源:互聯網
上載者:User

標籤:浮動   content   none   區塊層級元素   spl   特性   轉換   float   邊框   

一.標準文檔流:指元素根據塊元素或行內元素的特性按從上到下,從左至右的方式自然排列。這也是元素預設的相片順序


二.display屬性

display:更改區塊層級元素和行內元素的相互轉換
block:區塊層級元素的預設值
inline:行內元素的預設值
inline-block:同時具有行內和區塊層級元素的特性
none:隱藏元素內容

三.float浮動

left元素向左浮動
right元素向右浮動
none預設值。元素不浮動,並會顯示在其文本中出現的位置
<style type="text/css">
.layer01{
float: left;
}
.layer02{
float: right;
}

</style>

四.clear清除浮動

left在左側不允許浮動元素
right在右側不允許浮動元素
both在左、右兩側不允許浮動元素
none預設值。允許浮動元素出現在兩側
<style type="text/css">
.layer01{
clear:left;
}
.layer01{
clear:right;
}
.layer01{
clear:both;
}
</style>

五.解決父級邊框塌陷的方法

1.浮動元素後面加空div
<div class="layer05">
<style type="text/css">
.layer05{
clear: both;
}

</style>

2.設定父元素的高度
<style type="text/css">
#father{
height: 500px;
}
</style>

3.父級添加overflow屬性
visible預設值。內容不會被修剪,會呈現在盒子之外
hidden內容會被修剪,並且其餘內容是不可見的
scroll內容會被修剪,但是瀏覽器會顯示捲軸以便查看其餘內容
auto如果內容被修剪,則瀏覽器會顯示捲軸以便查看其餘的內容
<style type="text/css">
#father{
overflow: hidden;
}
</style>

4.父級添加偽類after
<div id="father" class="clear"></div>
<style type="text/css">
.clear:after{
content: ‘‘; /*在clear類後面新增內容為空白*/
display: block; /*把添加的內容轉化為塊元素*/
clear: both; /*清除這個元素兩邊的浮動*/
}
</style>

六.inline-block和float的區別

display:inline-block
可以讓元素排在一行,並且支援寬度和高度,代碼實現起來方便
位置方向不可控制,會解析空格
IE 6、IE 7上不支援
float
可以讓元素排在一行並且支援寬度和高度,可以決定排列方向
float 浮動以後元素脫離文檔流,會對周圍元素產生影響,必須在它的父級上添加清除浮動的樣式

網頁浮動的解析

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.