元素浮动的问题

互联网 17-10-16

子元素浮动会导致父元素盒子无法被撑开，导致父元素的样式无法显示，以下介绍几种清除浮动的方法

原代码：

<!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>

以上就是元素浮动的问题的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：元素