清除浮动

最新推荐文章于 2024-07-26 08:00:00 发布

weixin_43294750

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量147

点赞数

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

本文链接：https://blog.csdn.net/weixin_43294750/article/details/88710826

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

清除浮动

什么是清除浮动

当容器的高度为auto，且容器中的内容存在浮动元素时，容器的高度会不能自动拉升以适应内容的高度（高度塌陷），使得内容溢出到容器外面而影响布局的现象叫做浮动溢出。为了防止该现象的发生而进行的css处理，叫做css清除浮动。

浮动溢出的示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
  padding: 0;
  margin:0;
}
.parent{
  border:5px solid #ddd;
}
.child{
  float: left;
  width: 50px;
  height:50px;
  background-color: red;
}
</style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

子div并没有撑起父div的高度，导致父div的高度塌陷，这就是浮动溢出。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能的窄。

清除浮动的方法

使用带有clear属性的空元素（在浮动元素后使用一个空元素，并设置clear：both；属性。）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
  padding: 0;
  margin:0;
}
.parent{
  border:5px solid #ddd;
}
.child{
  float: left;
  width: 50px;
  height:50px;
  background-color: red;
}
.clear{
  clear: both;
}
</style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="clear"></div>
  </div>
</body>
</html>

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
2. 在浮动元素的容器上使用：after伪类

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
  padding: 0;
  margin:0;
}
.parent{
  border:5px solid #ddd;
}
.child{
  float: left;
  width: 50px;
  height:50px;
  background-color: red;
}
.clearfix:after{
  content: "";
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
}
</style>
</head>
<body>
  <div class="parent clearfix">
    <div class="child"></div>
  </div>
</body>
</html>

优点：浏览器支持好

缺点：代码多，可以定义公共类以减少css代码
3. 直接给父元素定义一个高度

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
  padding: 0;
  margin:0;
}
.parent{
  border:5px solid #ddd;
  height:50px;
}
.child{
  float: left;
  width: 50px;
  height:50px;
  background-color: red;
}
</style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

优点：简单，代码少

缺点：局限性大，只适合高度固定的布局
4. 触发BFC
由于BFC在计算高度的时候，浮动元素也会参与计算，所以通过触发BFC也能够解决问题。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
  padding: 0;
  margin:0;
}
.parent{
  border:5px solid #ddd;
  overflow:hidden;
}
.child{
  float: left;
  width: 50px;
  height:50px;
  background-color: red;
}
</style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

优点：简单，代码少

缺点：可能产生新的问题

参考链接：https://www.cnblogs.com/ForEvErNoME/p/3383539.html

weixin_43294750

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动

清除浮动什么是清除浮动当容器的高度为auto，且容器中的内容存在浮动元素时，容器的高度会不能自动拉升以适应内容的高度（高度塌陷），使得内容溢出到容器外面而影响布局的现象叫做浮动溢出。为了防止该现象的发生而进行的css处理，叫做css清除浮动。浮动溢出的示例<!doctype html><html><head><meta charset="ut...
复制链接

扫一扫