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

float浮动处理

2024-09-20 19:08:50   219人阅读

视频链接：

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浮动处理


联系
我们