元素浮动的问题
子元素浮动会导致父元素盒子无法被撑开，导致父元素的样式无法显示，以下介绍几种清除浮动的方法
原代码：
<!DOCTYPE html><html><head lang=en>
<meta charset=UTF-8>
<title></title>
<style type=text/css>
#content{
border: 1px red solid;
}
.fl{
border: 1px blueviolet solid;
height: 100px;
width: 100px;
float: left;
}
.fr{
border: 1px green solid;
height: 200px;
width: 200px;
float: right;
}
</style></head><body><p id=content>
<p class=fl>内容一</p>
<p class=fr>内容二</p></p></body></html>
显示如下：
1、设置父元素高度：
height: 500px; /*设置父元素高度*/
<!DOCTYPE html><html><head lang=en>
<meta charset=UTF-8>
<title></title>
<style type=text/css>
#content{
border: 1px red solid;
height: 500px; /*设置父元素高度*/
}
.fl{
border: 1px blueviolet solid;
height: 100px;
width: 100px;
float: left;
}
.fr{
border: 1px green solid;
height: 200px;
width: 200px;
float: right;
}
</style></head><body><p id=content>
<p class=fl>内容一</p>
<p class=fr>内容二</p></p></body></html>
2、父元素绝对定位：position:absolute;
<!DOCTYPE html><html><head lang=en>
<meta charset=UTF-8>
<title></title>
<style type=text/css>
#content{
border: 1px red solid;
position: absolute; /*父元素绝对定位*/ }
.fl{
border: 1px blueviolet solid;
height: 100px;
width: 100px;
float: left;
}
.fr{
border: 1px green solid;
height: 200px;
width: 200px;
float: right;
}
</style></head><body><p id=content>
<p class=fl>内容一</p>
<p class=fr>内容二</p></p></body></html>
3、父元素设置overflow：hidden
<!DOCTYPE html><html><head lang=en>
<meta charset=UTF-8>
<title></title>
<style type=text/css>
#content{
border: 1px red solid;
overflow: hidden;
}
.fl{
border: 1px blueviolet solid;
height: 100px;
width: 100px;
float: left;
}
.fr{
border: 1px green solid;
height: 200px;
width: 200px;
float: right;
}
</style></head><body><p id=content>
<p class=fl>内容一</p>
<p class=fr>内容二</p></p></body></html>
4、父元素设置浮动：float：left/right
<!DOCTYPE html><html><head lang=en>
<meta charset=UTF-8>
<title></title>
<style type=text/css>
#content{
border: 1px red solid;
float: left;
}
.fl{
border: 1px blueviolet solid;
height: 100px;
width: 100px;
float: left;
}
.fr{
border: 1px green solid;
height: 200px;
width: 200px;
float: right;
}
</style></head><body><p id=content>
<p class=fl>内容一</p>
<p class=fr>内容二</p></p></body></html>
5、在子元素最后添加一个空盒子，并设置样式为clear:both;
<!DOCTYPE html><html><head lang=en>
<meta charset=UTF-8>
<title></title>
<style type=text/css>
#content{
border: 1px red solid;
}
.fl{
border: 1px blueviolet solid;
height: 100px;
width: 100px;
float: left;
}
.fr{
border: 1px green solid;
height: 200px;
width: 200px;
float: right;
}
.clear{
clear: both;
}
</style></head><body><p id=content>
<p class=fl>内容一</p>
<p class=fr>内容二</p>
<p class=clear></p></p></body></html>
6、在父元素样式上添加一个伪类，相当于在子元素最后添加一个空盒子，原理与5类似
<!DOCTYPE html><html><head lang=en>
<meta charset=UTF-8>
<title></title>
<style type=text/css>
#content{
border: 1px red solid;
}
.fl{
border: 1px blueviolet solid;
height: 100px;
width: 100px;
float: left;
}
.fr{
border: 1px green solid;
height: 200px;
width: 200px;
float: right;
}
#content:after{
content: '';
display: block;
/!*height: 0;*!/
clear: both;
}
</style></head><body><p id=content>
<p class=fl>内容一</p>
<p class=fr>内容二</p></p></body></html>
以上就是元素浮动的问题的详细内容，更多请关注云资源网其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
云资源网
