Educoder html网页综合项目实战 第6关：清除浮动

任务描述

本关任务：清除浮动。

效果如下：

相关知识

为了完成本关任务，你需要掌握：1.浮动出现的问题，2.清除浮动的方法。

浮动出现的问题

基本的html结构如下：

1. <div class="container">
2. <div class="box1">
3. <p>我是box1不浮动的内容 </p>
4. <div class="left">
5. 左浮动
6. </div>
7. <div class="right">
8. 右浮动
9. </div>
10. </div>
11. <div class="box2">
12. <p>我是box2的内容 </p>
13. </div>
14. </div>

相应的css如下：

1. .container {
2. width: 400px;
3. margin: 60px auto;
4. background: #ccc;
5. }
7. .box1 {
8. border: 2px solid #000;
9. }
10. .left {
11. width: 50%;
12. line-height: 50px;
13. float: left;
14. }
15. .right {
16. width: 50%;
17. line-height: 50px;
18. float: right;
19. }

效果如下：

从html结构和效果图对比，发现不匹配，类为left和right的div竟然不在里面，这是为什么呢？ 是由于浮动导致的父元素高度塌陷。

解决办法

该怎么解决呢? 这里介绍一种比较常用的方法，在复杂的结构中也是没有问题的，其他清除浮动的方法都有一定的局限性，这里就不介绍了。

添加代码如下：

代码如下：

1. .clearfix:after{
2. content: "";
3. height: 0;
4. display: block;
5. visibility: hidden;
6. clear: both;
7. }
8. .clearfix{
9. zoom: 1;
10. }

在父元素中添加这个类就可以了。这里给类为box1的div添加，效果如下：

参数详解：

• content: ""; height: 0; 是设置伪类内容为空，高度为0；

• display: block; visibility: hidden; 设置它为一个不可见的块级元素；

• clear: both; 该属性的值指出了不允许有浮动对象的边，both 指左右两边；

• zoom： 1； 这是解决兼容问题的，兼容IE6。

这个感觉不好理解的话，可以先记下来，慢慢理解。