css清除浮动的方法

最新推荐文章于 2024-09-17 22:13:17 发布

小雨和小浩

最新推荐文章于 2024-09-17 22:13:17 发布

阅读量93

点赞数

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

本文链接：https://blog.csdn.net/angle_wty/article/details/114642081

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css清除浮动的方法：

一个父盒子和一个子盒子，子盒子浮动之后，父盒子的高度为0，接下来我们将解决父盒子高度塌陷问题，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动</title>
    <style>
        .parent{
            border: 1px solid red;
        }
        .child{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
   <div class="parent">
        <div class="child"></div>
   </div>
</body>
</html>

效果图：
在这里插入图片描述

1.给父元素设置固定高度；

  .parent{
            height: 200px;
            border: 1px solid red;
  }

2.给父元素设置浮动；

  .parent{
            float: left;
            border: 1px solid red;
  }

3.给父元素添加overflow属性值非visible；

 .parent{
            overflow: hidden;
            border: 1px solid red;
 }

4.clear:both；

第一种：在浮动元素后添加一个空div，设置clear:both;

<style>
   .empty{
       clear: both;
   }
</style>
<div class="parent">
   <div class="child"></div>
   <div class="empty"></div>
</div>

第二种：通过给父元素添加伪元素并设置clear:both;

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

5.给父元素添加伪类clearfix（最佳方案）；

第一种写法：

.clearfix::after{
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix{
	zoom: 1;
}
<div class="parent clearfix">
	<div class="child"></div>      
</div>

第二种：display:table;不仅能清除浮动，还能解决子元素上外边距重叠问题；

.clearfix::before,.clearfix::after{
   content: "";
   display: table;
   clear: both;
}
<div class="parent clearfix">
	<div class="child"></div>      
</div>