清除浮动常用方法

举报
liadlee 发表于 2021/09/26 17:39:20 2021/09/26
【摘要】 @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"> <titl...

@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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200