清除浮动的几种方法

最新推荐文章于 2022-11-24 11:37:35 发布

夏季梦幻想

最新推荐文章于 2022-11-24 11:37:35 发布

阅读量149

点赞数

分类专栏：前端文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_41832686/article/details/80270670

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

清除浮动的几种方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi2.css" rel="stylesheet">
<style>
.con{
    width: 1000px;

    background: #ccc;

}
.left{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: left;
}
.right{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: right;
}
</style>
</head>
<body>
    <div class="con">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

这里写图片描述

上面这是浮动导致的condiv不显示

解决方案为以下：

1.自定义高度

只适用于高度不变的情况。

2.最后加一个div或者br标签，css样式为clear：both 原理：会将来自元素周围的的浮动清除

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi2.css" rel="stylesheet">
<style>
.con{
    width: 1000px;

    background: #ccc;

}
.left{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: left;
}
.right{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: right;
}

.clear{
    clear: both;
}
</style>
</head>
<body>
    <div class="con">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clear"></div>
</div>
</body>
</html>

这里写图片描述

3.伪类：after

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi2.css" rel="stylesheet">
<style>
.con{
    width: 1000px;
    background: #ccc;

}
.con:after{
    display:block;
    clear:both;
    content:"";
}

.left{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: left;
}
.right{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: right;
}

</style>
</head>
<body>
    <div class="con">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

这里写图片描述 4.父元素加overflow：hidden 原理：的高度要被切掉，检查到了float高度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi2.css" rel="stylesheet">
<style>
.con{
    width: 1000px;
    background: #ccc;
    overflow: hidden;
}
.left{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: left;
}
.right{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: right;
}

</style>
</head>
<body>
    <div class="con">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

这里写图片描述

5.父元素加overflow：auto

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi2.css" rel="stylesheet">
<style>
.con{
    width: 1000px;
    background: #ccc;
    overflow: auto;
}
.left{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: left;
}
.right{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: right;
}

</style>
</head>
<body>
    <div class="con">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

这里写图片描述
6.父元素也添加float

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi2.css" rel="stylesheet">
<style>
.con{
    width: 1000px;
    background: #ccc;
    float: left;
}
.left{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: left;
}
.right{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: right;
}

</style>
</head>
<body>
    <div class="con">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

这里写图片描述
7. 父级div定义 display:table

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi2.css" rel="stylesheet">
<style>
.con{
    width: 1000px;
    background: #ccc;
    display: table;
}
.left{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: left;
}
.right{
    width: 100px;
    height: 100px;
    background-color: #c60;
    float: right;
}

</style>
</head>
<body>
    <div class="con">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

这里写图片描述

以上方法都可以清除float带来的浮动，本人初学者，如有错误欢迎指正。

这里写图片描述

夏季梦幻想

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的几种方法

清除浮动的几种方法自定义高度最后加一个div或者br标签，css样式为clear：both 原理：会将来自元素周围的的浮动清除伪类：after和zoom父元素加overflow：hidden 原理：的高度要被切掉，检查到了float高度父元素加overflow：auto父元素也添加float父级div定义 display:table ...
复制链接

扫一扫