CSS怎么给父级元素设置高度

这篇“CSS怎么给父级元素设置高度”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“CSS怎么给父级元素设置高度”文章吧。

　　清除浮动影响的几种方法:

　　给父级元素设置高度

　　代码：

　　<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="#">关于</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="#">关于</a></li>

　　</ul>

　　</div>

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

　　<div class="main">主要内容</div>

　　内墙法：使用一个空白块级元素上添加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="#">关于</a></li>

　　</ul>

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

　　</div>

　　内墙法 相对于外墙法有相对优点：

　　内墙法设置后，浮动元素的父级元素会被撑开，也就是说有了高度

　　给浮动元素的父元素添加 overflow:hidden

　　原意：表示移除隐藏，溢出边框的内容都要隐藏掉

　　代码：

　　<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="#">关于</a></li>

　　</ul>

　　</div>

　　<div class="main">主要内容</div>

以上就是关于“CSS怎么给父级元素设置高度”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。