浮動場景


<!DOCTYPE html><html lang=&#34;en&#34;><head> <meta charset=&#34;UTF-8&#34;> <meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;IE=edge&" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > html+css浮動解決方案

html+css浮動解決方案

時間：2023-09-06 20:12:01 | 來源：網(wǎng)站運營

時間：2023-09-06 20:12:01 來源：網(wǎng)站運營

html+css浮動解決方案：





浮動場景


<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; }</style></head><body> <!-- 父子級標簽, 子級浮動, 父級沒有高度, 后面的標準流盒子會受影響, 顯示到上面的位置 --> <div class="top"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div></body></html>




運行結果





額外標簽法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; } .clearfix { /* 清除左右兩側浮動的影響 */ clear: both; }</style></head><body> <!-- 父子級標簽, 子級浮動, 父級沒有高度, 后面的標準流盒子會受影響, 顯示到上面的位置 --> <div class="top"> <div class="left"></div> <div class="right"></div> <div class="clearfix"></div> </div> <div class="bottom"></div></body></html>

單偽元素

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; } /* 單偽元素清除浮動 和 額外標簽法原理是一樣的 */ .clearfix::after { content: ''; /* 偽元素添加的標簽是行內(nèi), 要求塊 */ display: block; clear: both; /* 為了兼容性 */ height: 0; visibility: hidden; }</style></head><body> <!-- 父子級標簽, 子級浮動, 父級沒有高度, 后面的標準流盒子會受影響, 顯示到上面的位置 --> <div class="top clearfix"> <div class="left"></div> <div class="right"></div> <!-- 通過css 添加標簽 --> </div> <div class="bottom"></div></body></html>

雙偽元素

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; } /* .clearfix::before 作用: 解決外邊距塌陷問題 外邊距塌陷: 父子標簽, 都是塊級, 子級加margin會影響父級的位置 */ /* 清除浮動 */ .clearfix::before, .clearfix::after { content: ''; display: table; } /* 真正清除浮動的標簽 */ .clearfix::after { /* content: ''; display: table; */ clear: both; }</style></head><body> <!-- 父子級標簽, 子級浮動, 父級沒有高度, 后面的標準流盒子會受影響, 顯示到上面的位置 --> <div class="top clearfix"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div></body></html>

overflow

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; overflow: hidden; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; }</style></head><body> <!-- 父子級標簽, 子級浮動, 父級沒有高度, 后面的標準流盒子會受影響, 顯示到上面的位置 --> <div class="top"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div></body></html>

運行結果



關鍵詞：方案,解決,浮動

74
73
25
news

版權所有? 億企邦 1997-2025 保留一切法律許可權利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關閉