時間：2023-09-28 00:24:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-09-28 00:24:01 來源：網(wǎng)站運(yùn)營
CSS網(wǎng)頁布局 -- 標(biāo)準(zhǔn)流/浮動流：
在線咨詢
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>標(biāo)準(zhǔn)流排版</title> <style> div {width: 100px; height: 100px;border: 2px solid blueviolet;} span~strong {border: 2px solid blueviolet;} </style></head><body><div class="box1">我是塊級</div><hr><span class="box2">我是行內(nèi)</span><hr><span class="box3">我是span</span><b>我是加粗FV4005</b><strong>我是強(qiáng)調(diào)FV215b(183)</strong></body></html>浮動元素脫離文檔流意味著,不再區(qū)分行內(nèi)、塊級、行內(nèi)塊級，無論是什么級的元素都可以水平排版.無論是什么級的元素都可以設(shè)置寬高,綜上所述，浮動流中的元素和標(biāo)準(zhǔn)流總的行內(nèi)塊級元素很像,當(dāng)某一個元素浮動走之后，那么這個元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣，這個就是浮動元素的脫標(biāo),如果前面一個元素浮動走了，而后面一個元素沒有浮動，那么垂直方向的元素會自動填充，浮動元素重新歸位后就會覆蓋該元素,浮動流只有一種排版方式，就是水平排版，它只能設(shè)置某個元素左對齊或者右對齊，沒有居中對齊，也就是沒有center這個取值一旦使用了浮動流，則margin:0 auto;失效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮動流排版</title> <style> .box1 {width: 100px;height: 100px;background-color: #08f820; float: left; -- 添加浮動 } .box2 {width: 150px;height: 150px;background-color: black} </style></head><body><div class="box1">我浮起來了</div><div class="box2"></div></body></html>是因?yàn)楦釉馗又蟮奈恢萌Q于它在浮動之前的標(biāo)準(zhǔn)流中的位置，跟標(biāo)準(zhǔn)流還是有一定的關(guān)系,比如說浮動的元素在浮動之前處于標(biāo)準(zhǔn)流的第二行,那么他浮動之后也是處于浮動流的第二行,不會去找其他行的浮動元素去貼靠,打一個比方就是:浮動流就是在標(biāo)準(zhǔn)流上面覆蓋的一層透明薄膜,元素浮動之后就會被從標(biāo)準(zhǔn)流中扔到浮動流這個薄膜上,他在這個薄膜上的位置還是以前在標(biāo)準(zhǔn)流的位置上找同方向的浮動元素進(jìn)行貼靠貼靠的準(zhǔn)則就是: 同一個方向上誰先浮動，誰在前面 不同方向上左浮動找左浮動，右浮動找右浮動 <style> .box1 {float: left;width: 100px;height: 100px;background-color: red;} .box2 {float: left;width: 150px;height: 150px;background-color: blue;} .box3 {float: right;width: 250px;height: 250px;background-color: yellow;} .box4 {float: right;width: 300px;height: 300px;background-color: rebeccapurple;} </style><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box4">4</div> <style> .box1 {float: left;} -- 圖片左浮 .box2 {float: right;} -- 圖片右浮 </style><body><div class="box1"><img src="21a14.jpg" alt="" height="200px"></div><div class="box2"><img src="18a12.jpg" alt="" height="200px" align="right"></div><div class="box3">硝煙飄到了遙遠(yuǎn)的盡頭，戰(zhàn)場已被風(fēng)沙掩埋，吶喊在空寂里沉默，古劍在殘風(fēng)中腐朽。為戰(zhàn)斗而生的靈魂，開始為生存而戰(zhàn)斗，沒有號角的年代里，生存是唯一的長路。</div><div class="box4">生命短暫，猶若露珠消散，人們在奔波中探尋答案。運(yùn)數(shù)仿佛大海起伏不定，掌上迷離脈紋回路漫漫。長劍在黑夜吟唱悲歌，歲月如斑駁銅鏡經(jīng)年。天際流火叩響大地之門，歲月星辰刻畫滄桑年輪?？v橫交錯兮天下之局，誰能參悟兮世事如棋。</div></body>clear這個屬性必須設(shè)置在塊級、并且不浮動的元素中值 none : 默認(rèn)值。允許兩邊都可以有浮動對象 left : 不允許左邊有浮動對象 right : 不允許右邊有浮動對象 both : 不允許左右有浮動對象重要兩點(diǎn) 元素是從上到下、從左到右依次加載的 clear: left;對自身起作用，而不會影響其他元素 一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據(jù)這一點(diǎn)解決父級塌陷問題。 <style type="text/css"> * {margin: 0;padding: 0;} body {} .header {} .logo {width: 200px;height: 200px;background-color: red;float: left;} .nav {width: 200px;height: 200px;background-color: green;float: left;} .content {width: 960px;height: 200px;background-color: yellow;} .wall {clear: both;height: 20px;} </style><div class="header"> <div class="logo">logo</div> <div class="nav">nav</div></div><!--外墻--><div class="wall h20"></div><div class="content">content</div> <style type="text/css"> * {margin: 0;padding: 0;} body {} .header { /*margin-bottom: 30px;*/} .logo {width: 200px;height: 200px;background-color: red;float: left;} .nav {width: 200px;height: 200px;background-color: green;float: left;} .content {width: 960px;height: 200px;background-color: yellow; /*margin-top: 30px;*/} .wall {clear: both;height: 30px;} </style><div class="header"> <div class="logo">logo</div> <div class="nav">nav</div> <!--內(nèi)墻--> <div class="wall h20"></div></div><div class="content">content</div> <style type="text/css"> * {margin: 0;padding: 0;} body {} .header:after { /*必須要寫這三句話*/content: '.';height: 0;display: block;clear: both;visibility: hidden;} .header { /*兼容ie6,否則偽類選擇器只能在谷歌瀏覽器中生效，其余沒用*/*zoom: 1;} .logo {width: 200px;height: 200px;background-color: red;float: left;} .nav {width: 200px;height: 200px;background-color: green;float: left;} .content {width: 960px;height: 200px;background-color: yellow;} </style><div class="header"> <div class="logo">logo</div> <div class="nav">nav</div></div><div class="content">content</div>關(guān)鍵詞：浮動,標(biāo)準(zhǔn),布局
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
