網(wǎng)站設(shè)計(jì)中div+浮動的示例分析

小編給大家分享一下網(wǎng)站設(shè)計(jì)中div+浮動的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在網(wǎng)站建設(shè)中，總會遇到html和css各種各樣的問題，打開網(wǎng)站http://www.kemok4.com首頁，查看源代碼，滿屏全是html標(biāo)簽，不下幾十個div。
html中包括兩種元素 內(nèi)聯(lián)元素(行內(nèi)元素) 和 塊元素 ,怎么理解呢？

行內(nèi)元素就是不換行的元素,并且大小可以自適應(yīng). 例如 a img font span，當(dāng)我們建設(shè)一個網(wǎng)站的時(shí)候，里面的文字內(nèi)容就是行內(nèi)元素。
塊元素就是不論內(nèi)容多少 寬度高度多少都會換行顯示 例如 div p li，一般用在網(wǎng)站的布局上。
行內(nèi)元素和塊元素的相互切換用到display: inline block這兩個 css屬性..
對于行內(nèi)元素 如果內(nèi)部還包含塊元素 那么就用display:inline-block ;
inline 只用于內(nèi)部包含inline元素的時(shí)候使用。
行內(nèi)元素內(nèi)部可以包含行內(nèi)元素 盡量不要包含塊元素。
塊元素 內(nèi)部可以嵌套行內(nèi)元素和塊元素 。
在網(wǎng)站中浮動float 就是將自己漂移到父元素邊框,或者前一個浮動元素的邊框?yàn)橹?，浮動很有?在利用 ul li做menu的時(shí)候可以用到
在用div做menu的時(shí)候也可以使用浮動。

float:right ;
浮動rigth可以使浮動框拋棄原來的位置 后面的浮動會緊跟過來 浮動到父親元素邊框的右邊界停止最好是如果我們利用浮動做網(wǎng)站菜單，一組menu最好全部浮動或者全部不浮動 如果中間有一個不浮動就會出現(xiàn)奇怪的顯示效果空間不夠大了可以往下自適應(yīng) 。直到填充完了離開父元素 。

float:left ;
float left 和right其實(shí)是一樣的，只不過一個向左邊 一個向右邊 . 他們的浮動都會到父親邊框位置或者前一個浮動塊為止， 如果在您的網(wǎng)站里面，一對div中有一個height高度大于其他div那么后即浮動div會被卡在他的后面，直到有足夠空間 。
對于行內(nèi)元素 如果浮動 就會將樣式設(shè)置成塊元素并可以設(shè)置 width 和height ..否則 這兩個屬性無效，但是這里雖然是塊元素 但是他會讓出同行右邊的位置,并且可以顯示其他內(nèi)容 例如很多網(wǎng)站排版時(shí)的文字包圖就是這個原理 ///

清除浮動.就是清除浮動效果
浮動的關(guān)鍵就在于 讓出位置 和緊接著 前一個浮動 快 。

以上是“網(wǎng)站設(shè)計(jì)中div+浮動的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！