首页 > 代码库 > float浮动处理

float浮动处理

视频链接:

https://ke.qq.com/webcourse/index.html#course_id=132463&term_id=100148007&taid=620244817282415&vid=o1410oqdx82

使用float后父容器的高度将不会被子元素撑高,针对这一问题有几种解决方法具体在代码里,但推荐使用以下两种方法:

1.为当前元素添加以下样式

.clearfix:after{
  clear: both;  //清除浮动
  content: "";
  display: block;  //显示为块级元素
  visibility: hidden;
}

2.为当前元素添加overflow: hidden;的样式,但有弊端,超出容器部分会被隐藏,选择性使用!

 

代码例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>float</title>
<style type="text/css">
body,html{margin: 0;padding: 0;}

div{padding: 15px 30px; font-size: 14px;color: #333;}
.wrap{
border: 1px solid red;
widows: 980px;
margin: 20px auto 0;
background: #fafafa;
}
.main{
height: 100px;
widows: 500px;
background: #ccc;
}
.side{
widows: 220px;
background: #eee;
}

.left{float: left;}
.right{float: right;}

.footer-bar{
border: 1px solid blue;
background: #ccc;
widows: 980px;
margin: 20px auto 0;
}

.clear{clear: both;}
.clearfix:after{
clear: both;
content: "";
display: block;
visibility: hidden;
}
.clearfix{*zoom:1;}

</style>
</head>
<body>

<div class="wrap">
<div class="main left">.main 的内容没有撑高父容器</div>
<div class="side right">.side 设置了右浮动</div>
</div>
<div class="footer-bar clear">.footer-bar 通过设置clear:both 清除浮动,但.warp的高度没变</div>

<div class="wrap clearfix">
<div class="main left">.main 可以清除浮动了,因为给div wrap加上了css伪类方式清除,不用给footer-bar div清除浮动了</div>
<div class="side right">.side 设置了右浮动</div>
</div>
<div class="footer-bar">.footer-bar 通过设置clearfix清除浮动</div>

<div class="wrap">
<div class="main left">.main </div>
<div class="side right">.side 设置了右浮动</div>
<div class="clear"></div>
</div>
<div class="footer-bar">.footer-bar 通过添加空的div设置clear</div>

<div class="wrap">
<div class="main left">.main 违背了我们常提出的显示和结构分离</div>
<div class="side right">.side 设置了右浮动</div>
<br clear="all"/>
</div>
<div class="footer-bar">.footer-bar 通过添加br换行符清除浮动</div>

<div class="wrap" style="overflow: hidden;">
<div class="main left">.main 通过div设置超出隐藏清除浮动</div>
<div class="side right">.side 设置了右浮动</div>
</div>
<div class="footer-bar">.footer-bar </div>

</body>
</html>

float浮动处理