清除浮动影响

怼烎@ 2022-04-04 12:09 182阅读 0赞

任务描述

本关任务：清除浮动。

效果如下：

![198872][]

相关知识

为了完成本关任务，你需要掌握：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.  `}`
6.   
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. `}`

效果如下：

![197199][]

从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`添加，效果如下：

![197201][]

参数详解：

*  `content: ""; height: 0;` 是设置伪类内容为空，高度为`0`；
 *  `display: block; visibility: hidden;` 设置它为一个不可见的块级元素；
 *  `clear: both;` 该属性的值指出了不允许有浮动对象的边，`both` 指左右两边；
 *  `zoom： 1；` 这是解决兼容问题的，兼容IE6；

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

编程要求

在右侧编辑器中，补全`Begin`至`End`中间的部分，按照提示完成代码：

*  设置伪类内容为空；高度为0；
 *  设置它为一个不可见的块级元素；
 *  清除两边的浮动；

注意：

*  这里的 `0px`不用加`px`，直接写`0`即可；
 *  这些只是为了方便评测做的规范；

效果如下：

![198872][]

[198872]: /images/20220404/faefa14e5b1b4cc9a74434e6af2dfadd.png
[197199]: https://educoder.trustie.net/attachments/download/197199
[197201]: https://educoder.trustie.net/attachments/download/197201