css-清除浮动

最新推荐文章于 2023-12-17 19:28:34 发布

前端笨鸟

最新推荐文章于 2023-12-17 19:28:34 发布

阅读量83

点赞数

分类专栏： html学习笔记文章标签： css

本文链接：https://blog.csdn.net/qq_41670147/article/details/102840727

版权

html学习笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

清除浮动的方法
1.父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
缺点：在浮动元素高度不确定的时候不适用。

2.结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。
缺点：如果页面浮动布局多，就要增加很多空div，会增加代码的冗余量。

3.父级div定义双伪类和 zoom（主流方法，推荐使用）
原理：利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，区别在于:clear在html插入一个div.clear标签，会增加代码冗余量，而此法利用伪类clear:after在元素内部增加一个类似于div.clear。

<!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>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>

<body>
</body>
<div class="clearfix"></div>

</html>

前端笨鸟

关注

0
点赞
踩
0

收藏

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

<!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-...
复制链接

扫一扫