引言:
有时,我们并不想让内容向浮动元素的一方移动。比如如果子元素浮动了,并且父元素没有设置高度,此时脱离标准流的不占位的子元素将不能撑开块级父元素,所以会影响其他网页元素的布局。如下图所示:
方法一:为父元素添加高
非常简单,但却十分受限。因为在实际应用中,如果父元素包含的内容是动态变化的,那么我们就不能固定地为父元素设置高度。
方法二:额外标签法
操作:
- 在父元素内容后添加一个块级元素
- 给添加的块级元素设置clear:both(清除浮动影响)
缺点:会在页面中添加额外的标签,会让页面的HTML结构变得复杂。
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix{
clear:both;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
<!-- 添加的块级元素 -->
<div class="clearfix"></div>
</div>
<!-- 其他网页元素 -->
<div class="other"></div>
</body>
</html>
clear属性只适用于块级元素,clear:both保证目标元素(clearfix)不与任何浮动的元素共处一行。
对clear属性的更详细解析:
在CSS1和CSS2中,clear起作用的方式是增加元素的上外边距,把元素移到浮动的元素下方。因此,为元素声明的上外边距其实会被忽略。假如元素自身的上外边距为1.5rem,为了把元素向下移动足够的距离,确保内容区在浮动元素的下边界以下,浏览器可能会把上外边距增加为10em、25px、7.133in,或者其他能满足要求的值。
然而,CSS2.1引入了间距(clearance)这个概念。间距是为了把元素向下移动,确保显示在浮动元素下方而在元素上外边距上方增加的额外空白。这意味着,清楚了浮动的元素,其上外边距不再受影响。
方法三:单伪元素清楚法(常用)
用伪元素代替了额外标签。
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 基本写法 */
.clearfix::after{
content: '';
/* 将伪元素标签由行内元素转为块元素 */
display: block;
clear: both;
}
/* 补充写法 原理同上,考虑了对低版本浏览器的兼容性 */
.clearfix::after{
content: '';
display: block;
clear: both;
/* 补充代码,在网页中看不到伪元素 */
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
<!-- 添加的块级元素 -->
<div class="clearfix"></div>
</div>
<!-- 其他网页元素 -->
<div class="other"></div>
</body>
</html>
方法四:双伪元素清楚法
优点:直接给标签加类即可清除浮动。
代码示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix::after,
.clearfix::before
{
content: '';
display: table;
}
.clearfix::after{
clear:both;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
<!-- 添加的块级元素 -->
<div class="clearfix"></div>
</div>
<!-- 其他网页元素 -->
<div class="other"></div>
</body>
</html>
方法五:給父级元素添加overflow:hidden
这样父级的高度就随子级容器及子级内容的高度而自适应。
以上若有不当之处,欢迎指正。