关于div元素的浮动的问题

发布网友发布时间：2022-05-12 01:50

共2个回答

懂视网时间：2022-05-12 06:12

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

原代码：

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

热心网友时间：2022-05-12 03:20

float:none在没有继承父元素浮动属性的时候没有任何意义。
float:both;好像没这个属性吧？

另个，第三个all没有闭合追问我是新手，弄错了，是clear，不是float。但是为什么我的three_1和three_3出不来框呢？