float浮动处理

最新推荐文章于 2019-06-11 14:01:31 发布

weixin_34413065

最新推荐文章于 2019-06-11 14:01:31 发布

阅读量63

点赞数

原文链接：http://www.cnblogs.com/lexin593119348/p/6832300.html

版权

视频链接：

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

http://study.163.com/course/courseLearn.htm?courseId=1003864040#/learn/video?lessonId=1004581024&courseId=1003864040

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

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

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

.box{

　　*zoom:1;//兼容IE

}

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>

转载于:https://www.cnblogs.com/lexin593119348/p/6832300.html

weixin_34413065

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
float浮动处理

视频链接：https://ke.qq.com/webcourse/index.html#course_id=132463&term_id=100148007&taid=620244817282415&vid=o1410oqdx82http://study.163.com/course/courseLearn.htm?courseId=1003864040#/lear...
复制链接

扫一扫