一、问题引入
我们在浏览购物网站时,会出现一种情况就是我们不断滚动浏览器,网站会不断加载出图片。
此时,我们就发现一个问题-------图片肯定是放在每一个小盒子上,所有小盒子又放在一个大盒子上,如果这些小盒子采用浮动的形式排列(这里不考虑弹性盒子可看另外一篇博客),大盒子的高度很明显是不方便给出来的,因为小盒子的个数是不确定的。
到了这里,我们会想那我们父盒子不给高度,通过子盒子来撑开父盒子不就可以了吗?但事实却不是这样的,下面举个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动带来的影响</title>
<style type="text/css">
.contaner{
width: 598px;
border: 1px solid green;
}
.item{
width: 100px;
height: 100px;
float: left;
background-color: pink;
margin: 2px;
}
.box{
width: 600px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<!--第一个产品站-->
<div class="contaner">
<div class="item"></div>
<div class="item"></div>
</div>
<!--第二个产品站-->
<div class="box"></div>
</body>
</html>
我们想像中的效果是:
但实际效果是:
很明显,父容器高度为0(子元素处在浮动层,不占位置),父容器没有将子容器的浮动给控制好,导致第二个父容器(标准流)出现上述情况为什么会出现这种情况可以看另外我的一篇博客。
注意:大家仔细看在大盒子的最上层有点粗(可能有点看不出来,大家修改一下颜色就可以看出来),是父容器和另外一个父容器叠加的效果。
二、解决方法
问题分析:
- 前提这些小盒子是浮动的。
- 在网页开发中,只要小盒子个数不确定,父容器的高度是不方便给出的。
- 父容器盒子不给出的话,会影响到其他元素的布局。
综上所述:必须给盒子解除浮动
解决方法:
- 解决方法一 额外标签法(隔墙法)W3C推荐的方法
<style type="text/css">
.clear{
clear: both;
}
</style>
<div class="contaner">
<div class="item"></div>
<div class="item"></div>
<div class="clear"></div>
</div>
优:通俗易懂 缺:结构性不好
- 解决方法二 父级添加overflow属性
<style type="text/css">
.contaner{
overflow: hidden;
}
</style>
<div class="contaner">
<div class="item"></div>
<div class="item"></div>
</div>
优:代码简洁 缺:无法显示溢出部分
- 解决方法三 父级添加after伪元素
<style type="text/css">
.clearfix:after{
content: "";
display: block;
clear: both;
height: 0px;
visibility: hidden;
}
.clearfix{
*zoom: 1;
}
</style>
<div class="contaner clearfix">
<div class="item"></div>
<div class="item"></div>
</div>
优:没有添加标签、结构更加简单 缺:需要照顾低版本浏览器
- 解决方法四 父级添加双伪元素
<style type="text/css">
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
</style>
<div class="contaner clearfix">
<div class="item"></div>
<div class="item"></div>
</div>
优:不用添加标签 ,代码更加简洁 缺:需要照顾低版本浏览器
三、总结
弹性布局和浮动布局,我个人比较喜欢弹性布局,方便,使用起来比较简单。但浮动布局相比与弹性布局最大的不同在于:
- 浮动的元素具有行内元素的特性
- 浮动元素会脱离标准流(原来位置不保存)
- 浮动元素会一行显示并且元素顶部对齐
- 浮动的元素不会压住下面标准流的文字 (之所以不会压住文字,是因为浮动最初的目的是为了做文字环绕效果)