清除浮动常用方法
@TOC
代码如下:
<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>清除浮动的方式</title>
<style>
.box{
border: 3px solid red;
width:800px;
margin:0 auto;
}
.left{
float: left;
background-color: #dba893;
width: 400px;
height: 500px;
}
.right{
float: right;
background-color:#788a74;
width:400px;
height:500px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
box内的两个子元素均使用了float属性,使父容器出现高度塌陷的现象:
解决方法如下:
设置父容器高度
父元素高度塌陷是因为没有具体设置父元素的高度,默认为自适应,可以指定父元素高度:
```.box{
border: 3px solid red;
width:800px;
margin:0 auto;
height:500px;
}
优缺点
优点是简单,缺点也很明显,需要确定子元素的高度,而很多场景高度不能强制指定,需要自适应,灵活性较差。
使用clear属性
clear 属性可以设置元素的两侧是否允许浮动,一般使用clear:both;
clear 属性可设置以下值之一:
none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值
注意
需要在父容器下新加一个子元素并设置clear属性。在浮动的子元素上添加无效果(尝试结果如下图):
使用方法
<style>
.box{
border: 3px solid red;
width:800px;
margin:0 auto;
}
.left{
float: left;
background-color: #dba893;
width: 400px;
height: 500px;
}
.right{
float: right;
background-color:#788a74;
width:400px;
height:500px;
}
.clear{
clear: both; //2,给添加的子元素设置clear属性
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div> //1,父容器内添加一个子元素
</div>
优缺点
优点是灵活性比第一个方式好,缺点是新加了一个空容器,设置麻烦,内容冗余。
使用overflow:hidden
overflow 属性本意规定当内容溢出元素框时发生的事情。用在清除浮动上有奇效。
使用方法
在父元素上设置overflow属性,属性值为hidden。
.box{
border: 3px solid red;
width:800px;
margin:0 auto;
overflow: hidden;
}
优缺点
设置起来最简单,十分常用。
clearfix方案(企业级应用中清除浮动的最佳方法)
接下来就是本篇的核心部分,使用clearfix方案清除浮动;方法如下:
- 使用伪元素after在父元素尾部添加一个元素
- 对这个添加的伪元素应用清除浮动的样式
- 必写三大样式:
content、clear、display
- 可选三大样式:
height、font-size、visibility
例如︰
//必写样式
.clearfix:after { //::after 伪元素可用于在元素内容之后插入一些内容。关于此处伪元素写法有疑问,见文末
content:""; //添加了内容,内容为""
clear: both; //清除两侧浮动
display: block; //块级显示
}
//全写样式
.clearfix:after {
content:"";
clear: both;
display: block;
height: 0px; //设置了高度
font-size: 0px; //设置了字体大小
visibility:hidden;//设置为不可见
}
具体代码
<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>clearfix方案清除浮动</title>
<style>
.box{
border: 3px solid red;
width:800px;
margin:0 auto;
}
.clearfix::after{
content: "";
clear: both;
display: block;
height: 0px;
font-size: 0px;
visibility: hidden;
}
.left{
float: left;
background-color: #dba893;
width: 400px;
height: 500px;
}
.right{
float: right;
background-color:#788a74;
width:400px;
height:500px;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
疑问点(clearfix:after?clear::after)
发现这个地方在叙述使用clearfix方案时说明使用伪元素,可在具体代码中使用的是clearfix:after(伪类方式写法),比较疑惑的是伪类中没有":after"选择器,可使用伪类的方式写居然也生效。
部分素材来源于w3school 链接:https://www.w3school.com.cn/css/css_pseudo_elements.asp
- 点赞
- 收藏
- 关注作者
评论(0)