CSS怎么給父級元素設(shè)置高度

這篇“CSS怎么給父級元素設(shè)置高度”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS怎么給父級元素設(shè)置高度”文章吧。

　　清除浮動影響的幾種方法:

　　給父級元素設(shè)置高度

　　代碼：

　　<style>

　　* {

　　padding: 0;

　　margin: 0;

　　}

　　.header {

　　height: 30px;

　　line-height: 30px;

　　background-color: #333;

　　}

　　.header a {

　　color: #fff;

　　text-decoration: none;

　　}

　　ul {

　　float: right;

　　}

　　li {

　　float: left;

　　list-style: none;

　　padding-right: 20px;

　　}

　　</style>

　　<div class="header">

　　<ul>

　　<li><a href="#">首頁</a></li>

　　<li><a href="#">文章</a></li>

　　<li><a href="#">問答</a></li>

　　<li><a href="#">幫助</a></li>

　　<li><a href="#">關(guān)于</a></li>

　　</ul>

　　</div>

　　外墻法：使用一個空白塊級元素上添加css樣式clear清除浮動

　　注意：添加了clear樣式的塊級元素添加不了margin外邊距屬性

　　代碼：

　　<style>

　　* {

　　padding: 0;

　　margin: 0;

　　}

　　.header {

　　/* background-color: #333; */

　　}

　　.header a {

　　/* color: #fff; */

　　text-decoration: none;

　　}

　　ul {

　　float: right;

　　}

　　li {

　　float: left;

　　list-style: none;

　　padding: 5px 20px;

　　}

　　.clearfix {

　　height: 10px;

　　background-color: red;

　　clear: both;

　　}

　　.main {

　　color: #fff;

　　height: 100px;

　　background-color: blue;

　　}

　　</style>

　　<div class="header">

　　<ul>

　　<li><a href="#">首頁</a></li>

　　<li><a href="#">文章</a></li>

　　<li><a href="#">問答</a></li>

　　<li><a href="#">幫助</a></li>

　　<li><a href="#">關(guān)于</a></li>

　　</ul>

　　</div>

　　<div class="clearfix"></div>

　　<div class="main">主要內(nèi)容</div>

　　內(nèi)墻法：使用一個空白塊級元素上添加css樣式clear清除浮動

　　代碼：

　　<style>

　　* {

　　padding: 0;

　　margin: 0;

　　}

　　.header {

　　background-color: #333;

　　}

　　.header a {

　　color: #fff;

　　text-decoration: none;

　　}

　　ul {

　　float: right;

　　}

　　li {

　　float: left;

　　list-style: none;

　　padding: 5px 20px;

　　}

　　.clearfix {

　　clear: both;

　　}

　　</style>

　　<div class="header">

　　<ul>

　　<li><a href="#">首頁</a></li>

　　<li><a href="#">文章</a></li>

　　<li><a href="#">問答</a></li>

　　<li><a href="#">幫助</a></li>

　　<li><a href="#">關(guān)于</a></li>

　　</ul>

　　<div class="clearfix"></div>

　　</div>

　　內(nèi)墻法 相對于外墻法有相對優(yōu)點(diǎn)：

　　內(nèi)墻法設(shè)置后，浮動元素的父級元素會被撐開，也就是說有了高度

　　給浮動元素的父元素添加 overflow:hidden

　　原意：表示移除隱藏，溢出邊框的內(nèi)容都要隱藏掉

　　代碼：

　　<style>

　　* {

　　padding: 0;

　　margin: 0;

　　}

　　.header {

　　background-color: #333;

　　overflow: hidden;

　　}

　　.header a {

　　color: #fff;

　　text-decoration: none;

　　}

　　ul {

　　float: right;

　　}

　　li {

　　float: left;

　　list-style: none;

　　padding: 5px 20px;

　　}

　　.main {

　　color: #fff;

　　height: 100px;

　　background-color: blue;

　　}

　　</style>

　　<div class="header">

　　<ul>

　　<li><a href="#">首頁</a></li>

　　<li><a href="#">文章</a></li>

　　<li><a href="#">問答</a></li>

　　<li><a href="#">幫助</a></li>

　　<li><a href="#">關(guān)于</a></li>

　　</ul>

　　</div>

　　<div class="main">主要內(nèi)容</div>

以上就是關(guān)于“CSS怎么給父級元素設(shè)置高度”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。