元素浮动的问题

来源：动视网责编：小采时间：2020-11-27 15:07:12

元素浮动的问题

元素浮动的问题:子元素浮动会导致父元素盒子无法被撑开，导致父元素的样式无法显示，以下介绍几种清除浮动的方法原代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> &

推荐度：

导读元素浮动的问题:子元素浮动会导致父元素盒子无法被撑开，导致父元素的样式无法显示，以下介绍几种清除浮动的方法原代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> &

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

原代码：

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

元素浮动的问题

推荐度：

点击下载本文 文档为doc格式

标签：元素问题的问题

热门焦点

元素浮动的问题

元素浮动的问题

元素浮动的问题

最新推荐

猜你喜欢

热门推荐