元素浮动的问题

百变鹏仔 2个月前 (10-18) #H5教程

文章标签元素

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

原代码：

<!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: &#39;&#39;;            display: block;            /!*height: 0;*!/            clear: both;        }    </style></head><body><p id="content">    <p class="fl">内容一</p>    <p class="fr">内容二</p></p></body></html>

文章推荐

元素浮动的问题

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集