您的位置: 首页  >  文章  >  清除浮动的几种方法

清除浮动的几种方法

分类: 文章 • 2023-03-31 11:33:13

清除浮动的本质：

                                    清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 影响到下面布局的问题
  清除浮动的几种方法

清除浮动的方法：

     在CSS中，clear属性用于清除浮动，其基本语法格式如下： 

选择器 {

    clear:属性值;

} 

属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

1.额外标签法

    是w3c推荐的作法，是指在通过浮动元素的末尾添加一个空的标签，例如：

<div style="clear:both"></div>,或者是其他标签也可以

    优点：通俗易懂，书写方便

    缺点：添加许多无意义的标签，结构化较差，影响代码可读性。

    所以虽然是w3c推荐的标准，但是实际中我们一般不采用

详细代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
border: 1px solid red;

width: 300px;

}
.big {
width: 100px;
height: 200px;
background-color: black;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: pink;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: gray;
}
.clear {
clear: both;
/*如果清除了浮动， 父亲则会自动检测孩子的高度  以最高的为准*/
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
<!-- 最后一个浮动标签的后面，新添加一个标签 清除浮动 -->
<div class="clear"></div>  
</div>
<div class="footer"></div>
</body>
</html>


2.父级添加overflow属性方法

可以给父级添加： overflow为 hidden|auto|scroll  的属性都可以都可以实现。
优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow 清除浮动</title>
<style>
.father {
border: 1px solid red;
width: 300px;
overflow: hidden;  /* 记得给父亲添加该属性 */
}
.big {
width: 100px;
height: 200px;
background-color: black;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: pink;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div class="father"> 
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>

3.使用after伪元素清除浮动

使用方法：

.clearfix:after {  

    content: ""; 

    display: block; 

    height: 0; clear: both; 

    visibility: hidden; 

}   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
详细代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:after {  /*正常浏览器 清除浮动*/
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;  /*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/
}
.father {
border: 1px solid red;
width: 300px;


}
.big {
width: 100px;
height: 200px;
background-color: black;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: pink;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>

4.使用before和after双伪元素清除浮动

 这种方式采用的比较多，推荐使用

 使用方法：
.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
详细代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* 此处是为了兼容IE6 IE7 */
}
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 200px;
background-color: black;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: pink;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>

                                                                                                - The End -

                                                                                联系作者：[email protected]

相关推荐