首先,感谢廿四桥明月夜
我在他转载的文章的基础上自己做了总结和理解,虽然不知道原创是谁,但是灰常的感谢,帮助我们这些前端小白。
话不多说进入正题:
1.首先什么是浮动:举一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.topDiv {
background:yellow;
width: 500px;
}
.floatDiv {
width: 100px;
height: 100px;
background-color: red;
color: #fff;
float: left;
}
.otherDiv {
background-color: blue;
color: #fff;
}
.bottomDiv {
width: 500px;
height: 100px;
background-color: black;
color: #fff;
}
</style>
</head>
<body>
<div class="topDiv">
<div class="floatDiv">floatDiv</div>
<div class="otherDiv">otherDiv</div>
</div>
<div class="bottomDiv">bottomDiv</div>
</body>
</html>
在浏览器中的效果为:此时topDiv的高度等于otherDiv的高度
出现了以下问题:
1.浮动元素排版超出了其父级元素(.topDiv
),父元素的高度出现了塌缩,若没有文字高度的支撑,不考虑边框,父级元素高度会塌缩成零。
2.浮动元素甚至影响到了其父元素的兄弟元素(.bottomDiv
)排版。因为浮动元素脱离了文档流,.bottomDiv
在计算元素位置的时候会忽略其影响,紧接着上一个元素的位置继续排列。
解决问题的思路:
1.解决第一个问题,需要清除.otherDiv
周围的浮动;
2.而解决第二个问题,因为父元素的兄弟元素位置只受父元素位置的影响,就需要一种方法将父级元素的高度撑起来,将浮动元素包裹在其中,避免浮动元素影响父元素外部的元素排列。
下面就来阐述一下具体的解决方法:
方法1.利用clear清除:此处需要注意的是吧clear加在了哪一个div上
.otherDiv {
background-color: blue;
color: #fff;
clear:left; /*此处是关键*/
}
此时的父级div(.topDiv)的高度就是两个子元素(.floatDiv .otherDiv)的高度之和,此次的父级div的高度就被撑起来了,而且bottomDiv的排版也正常了,在topDiv的下方, 解释原理的话就是因为.otherDiv的周围不允许有左浮动的div,所以.otherDiv就居左了,也可以使用clear:both清除他旁边的所有的浮动元素。
补充:若将两个子级div调换一下位置
<div class="topDiv">
<div class="otherDiv">otherDiv</div>
<div class="floatDiv">floatDiv</div>
</div>
<div class="bottomDiv">bottomDiv</div>
得到效果:此时.topDiv的高度和.otherDiv的高度一致
可以看出,.otherDiv的位置首先确定了, 然后浮动元素接着在其下面,所以父级的div高度并没有包含浮动的子div(.floatDiv)的高度。
方法2:父元素内部的最后插入清除浮动的块级元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.topDiv {
background:yellow;
width: 500px;
}
.floatDiv {
width: 100px;
height: 100px;
background-color: red;
color: #fff;
float: left;
}
.otherDiv {
background-color: blue;
color: #fff;
/*clear:left;*/
}
.bottomDiv {
width: 500px;
height: 100px;
background-color: black;
color: #fff;
}
.blankDiv{
clear: left;
} /*关键点,区别所在*/
</style>
</head>
<body>
<div class="topDiv">
<div class="floatDiv">floatDiv</div>
<div class="otherDiv">otherDiv</div>
<div class="blankDiv"></div>
</div>
<div class="bottomDiv">bottomDiv</div>
</body>
</html>
这个 方法的区别是在topDiv内部的最后一个子div后面加上了一个空的div(.blankDiv),作用就是清除其周围的浮动,使父div的高度被撑起来,此时父div(黄色的div)的高度就是两个子div高度的相加,其实这个原理和第一个是一样的。
3.利用伪元素(clearfix):
<style>/*此处只写了区别之处*/
.clearfix:after {
content: '.';
height: 0;
display: block;
clear: both;
}
</style>
<body>
<div class="topDiv clearfix">/*区别之处*/
<div class="floatDiv">floatDiv</div>
<div class="otherDiv">otherDiv</div>
</div>
<div class="bottomDiv">bottomDiv</div>
</body>
该样式在clearfix
,即父级元素的最后,添加了一个:after
伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的。注意到该伪元素的display
值为block
,即,它是一个不可见的块级元素(有的地方使用table
,因为table
也是一个块级元素)。你可能已经意识到,这也只不过是前一种清除浮动方法(添加空白div)的另一种变形,其底层逻辑也是完全一样的。前面的三种方法,其本质上是一样的。
4. 利用overflow清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
*{
padding: 0;
margin: 0;
}
.topDiv {
background:yellow;
width: 500px;
overflow: auto; /*区别就在这里*/
}
.floatDiv {
width: 100px;
height: 100px;
background-color: red;
color: #fff;
float: left;
}
.otherDiv {
background-color: blue;
color: #fff;
}
.bottomDiv {
width: 500px;
height: 100px;
background-color: black;
color: #fff;
}
</style>
</head>
<body>
<div class="topDiv">
<div class="floatDiv">floatDiv</div>
<div class="otherDiv">otherDiv</div>
</div>
<div class="bottomDiv">bottomDiv</div>
</body>
</html>
仅仅只在父级元素上添加了一个值为auto的overflow属性,父元素的高度立即被撑起,将浮动元素包裹在内。看起来,浮动被清除了,浮动不再会影响到后续元素的渲染(严格讲,这和清除浮动没有一点关系,因为不存在哪个元素的浮动被清除,不纠结这个问题)。其实,这里的overflow值,还可以是除了"visible"之外的任何有效值,它们都能达到撑起父元素高度,清除浮动的目的。不过,有的值可能会带来副作用,比如,scroll值会导致滚动条始终可见,hidden会使得超出边框部分不可见等。
最后还是感谢开篇提到的人给了我这个问题解决的方案。
如果有什么问题大家可以一起交流哦!