当前位置：首页 > news >正文

CSS系列之浮动清除clear（三）

news 来源：原创 2024/9/20 7:23:58

一、为什么需要清除浮动

浮动的原理是让元素脱离文档流，直接浮在桌面上。使用浮动后续添加内容布局可能会产生布局混乱，造成高度坍塌，这时候就可以利用清除浮动来解决父元素高度塌陷的问题。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动</title><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: pink;}.box2 {width: 150px;height: 150px;background-color: skyblue;}</style>
</head><body><div class="box1">1</div><div class="box2">2</div>
</body></html>

现在给1号盒子添加一个左浮动float :left，我们来看看会发生什么

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动</title><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: pink;float :left;}.box2 {width: 150px;height: 150px;background-color: skyblue;}</style>
</head><body><div class="box1">1</div><div class="box2">2</div>
</body></html>

我们可以看到2号盒子和1号盒子发生了重叠，那么原因是什么呢，原因是1号盒子漂浮起来了，原本所占的空间空缺出来了，所以2号盒子到了1号盒子的位置。

下面总结5种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）

二、解决方法之clear

直接给第二个盒子添加一个clear:left 这里需要注意,clear消除的是上一个盒子对自己的影响，所以，前面一个盒子往哪边浮动，我们就clear哪边，这里的上一个盒子是float:left，所以我们在第二个盒子上添加的也是clear:left

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动</title><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: pink;float :left;}.box2 {width: 150px;height: 150px;background-color: skyblue;clear: left;}</style>
</head><body><div class="box1">1</div><div class="box2">2</div>
</body></html>

三、解决方法之overflow:hidden

overflow这个属性需要添加在父元素上，所以我们给两个盒子添加一个父元素，为了看清楚高度塌陷,我们在添加一个底部盒子，如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动</title><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: pink;}.box2 {width: 80px;height: 80px;background-color: skyblue;}.father {width: 100%;border: 2px solid red;}.bottom {width: 100%;height: 200px;background-color: green;}</style></head><body><div class="father"><div class="box1">1</div><div class="box2">2</div></div><div class="bottom">3</div>
</body></html>

现在给1号盒子和2号盒子添加浮动,我们来看看会发生什么

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动</title><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: pink;float: left;}.box2 {width: 80px;height: 80px;background-color: skyblue;float: left;}.father {width: 100%;border: 2px solid red;}.bottom {width: 100%;height: 200px;background-color: green;}</style></head><body><div class="father"><div class="box1">1</div><div class="box2">2</div></div><div class="bottom">3</div>
</body></html>

可以看到我们的底部盒子不在原来的位置了，原因是什么呢,原因就是此时父元素我们并没有给他设置高度，父元素的高度完全是1号2号盒子撑起来的，现在给1号2号盒子添加了浮动，不占据原来的位置了，所以父元素此时的高度为零，不占位置了，底部盒子就会上去,造成高度塌陷。

解决方法就是:给父元素添加一个overflow:hidden

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动</title><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: pink;float: left;}.box2 {width: 80px;height: 80px;background-color: skyblue;float: left;}.father {width: 100%;border: 2px solid red;overflow:hidden;}.bottom {width: 100%;height: 200px;background-color: green;}</style></head><body><div class="father"><div class="box1">1</div><div class="box2">2</div></div><div class="bottom">3</div>
</body></html>

四、解决方法之给父元素添加高度

方法就是给父元素添加一个高度，注意父元素高度的设置一定要大于子元素中高度最高的盒子，以此例子来说就是，子元素中最高的盒子高度是100px，那么父元素的高度一定要大于等于100px。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动</title><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: pink;float: left;}.box2 {width: 80px;height: 80px;background-color: skyblue;float: left;}.father {width: 100%;height: 100px;border: 2px solid red;}.bottom {width: 100%;height: 200px;background-color: green;}</style></head><body><div class="father"><div class="box1">1</div><div class="box2">2</div></div><div class="bottom">3</div>
</body></html>