大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇“CSS怎么给父级元素设置高度”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS怎么给父级元素设置高度”文章吧。
站在用户的角度思考问题,与客户深入沟通,找到堆龙德庆网站设计与堆龙德庆网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、网站制作、企业官网、英文网站、手机端网站、网站推广、主机域名、虚拟主机、企业邮箱。业务覆盖堆龙德庆地区。
清除浮动影响的几种方法:
给父级元素设置高度
代码:
* {
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;
}
外墙法:使用一个空白块级元素上添加css样式clear清除浮动
注意:添加了clear样式的块级元素添加不了margin外边距属性
代码:
* {
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;
}
内墙法:使用一个空白块级元素上添加css样式clear清除浮动
代码:
* {
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;
}
内墙法 相对于外墙法有相对优点:
内墙法设置后,浮动元素的父级元素会被撑开,也就是说有了高度
给浮动元素的父元素添加 overflow:hidden
原意:表示移除隐藏,溢出边框的内容都要隐藏掉
代码:
* {
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;
}
以上就是关于“CSS怎么给父级元素设置高度”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。