lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
*.top
.banner
.box
li.box li
.box .last
.footer
style
>
head
>
>
class
="top"
>
div>
class
="banner"
>
div>
class
="box"
>
>
>
li>
>
li>
>
li>
class
="last"
>
li>
ul>
div>
class
="footer"
>
div>
body
>
html
>
2. 浮動的盒子只會影響浮動盒子後面的標準流, 不會影響前面的標準流
如果第乙個盒子不浮動, 第二個盒子浮動, 會發生什麼情況lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
.d1.d2
style
>
head
>
>
class
="d1"
>
div>
class
="d2"
>
div>
body
>
html
>
因為第乙個盒子沒有浮動. 是標準流 , 獨佔一行, 所以第二個盒子會在第二行顯示
CSS筆記 浮動和布局 清除浮動
網頁布局的本質 用css來擺放盒子。用盒子進行排序 普通流 標準流 浮動定位 標籤按照預設規定好的方式排列 塊級元素會獨佔一行，從上向下順序排列。常用元素有 div,hr,p,h1 h6,ul,ol,dl,form,table 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。常用元素...
css浮動布局
float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...
css浮動布局
清除浮動 形狀浮動 使用浮動可以控制相鄰元素間的排列關係。float left 向左浮動 float right 向右浮動 float none 不浮動 沒有設定浮動的塊元素是獨佔一行的。浮動是對後面元素的影響，第二個元素設定浮動對第乙個元素沒有影響。表示第乙個元素div.first of type...