任务描述
本关任务:清除浮动。
效果如下:
为了完成本关任务,你需要掌握:1.浮动出现的问题,2.清除浮动的方法。
基本的html结构如下:
<div class="container">
<div class="box1">
<p>我是box1不浮动的内容 </p>
<div class="left">
左浮动
</div>
<div class="right">
右浮动
</div>
</div>
<div class="box2">
<p>我是box2的内容 </p>
</div>
</div>
相应的css如
.container {
width: 400px;
margin: 60px auto;
background: #ccc;
}
.box1 {
border: 2px solid #000;
}
.left {
width: 50%;
line-height: 50px;
float: left;
}
.right {
width: 50%;
line-height: 50px;
float: right;
}
效果如下:
从html结构和效果图对比,发现不匹配,类为left
和right
的div竟然不在里面,这是为什么呢? 是由于浮动导致的父元素高度塌陷。
该怎么解决呢? 这里介绍一种比较常用的方法,在复杂的结构中也是没有问题的,其他清除浮动的方法都有一定的局限性,这里就不介绍了。
添加代码如下:
代码如下:
.clearfix:after{
content: "";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom: 1;
}
在父元素中添加这个类就可以了。这里给类为box1
的div
添加,效果如下:
参数详解:
-
content: ""; height: 0;
是设置伪类内容为空,高度为0
; -
display: block; visibility: hidden;
设置它为一个不可见的块级元素; -
clear: both;
该属性的值指出了不允许有浮动对象的边,both
指左右两边; -
zoom: 1;
这是解决兼容问题的,兼容IE6;
这个感觉不好理解的话,可以先记下来,慢慢理解。
在右侧编辑器中,补全Begin
至End
中间的部分,按照提示完成代码:
-
设置伪类内容为空;高度为0;
-
设置它为一个不可见的块级元素;
-
清除两边的浮动;
注意:
-
这里的
0px
不用加px
,直接写0
即可; -
这些只是为了方便评测做的规范;
效果如下: