清除浮动的常用方法

最新推荐文章于 2023-04-30 19:25:42 发布

懒懒l

最新推荐文章于 2023-04-30 19:25:42 发布

阅读量135

点赞数

分类专栏：内容小记前端学习文章标签： css html

本文链接：https://blog.csdn.net/ldcrle/article/details/119079649

版权

前端学习同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

内容小记

9 篇文章 0 订阅

订阅专栏

清除浮动常用方法

代码如下：

<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>