[CSS] - 几种清除浮动的方法总结

最新推荐文章于 2024-03-29 03:54:52 发布

Charonmomo

最新推荐文章于 2024-03-29 03:54:52 发布

阅读量152

点赞数

分类专栏：前端文章标签： css 清除浮动

本文链接：https://blog.csdn.net/Charonmomo/article/details/118362738

版权

前端专栏收录该内容

56 篇文章 2 订阅

订阅专栏

背景

有两个div父盒子, 内部子元素是浮动的:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding:0px;
            margin: 0px;
        }
        .box, .box2 {
            width: 1000px;
            border: 2px solid red;
        }
        .box p, .box2 p {
            width: 100px;
            height: 50px;
            background-color:pink;
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p></p>
        <p></p>
    </div>

    <div class="box2">
        <p></p>
        <p></p>
    </div>
</body>
</html>

方法一: 设置父元素高度

添加父元素高度, 值等于子元素高度
缺点: 如果浮动的子元素大小改变, 父元素不能自适应

.box, .box2 {
            width: 1000px;
            height: 50px;
            border: 2px solid red;
            clear: both;
        }

在这里插入图片描述

方法二: 给父元素添加clear属性, 清除标签元素自身受到的前面的浮动的影响

clear属性的属性值:

属性值	解释
left	清除前面左浮动带来的影响
right	清除前面右浮动带来的影响
both	清除前面左右浮动带来的影响

.box, .box2 {
            width: 1000px;
            /* 方法一: 设置父元素高度 */
            /* height: 50px; */
            border: 2px solid red;
            clear: both;
        }

在这里插入图片描述
缺点: 如果两个父元素间设置了margin, 会塌陷

方法三: 外墙法/隔墙法

在两个父盒子之间添加一个div, 为div设置clear属性
在这里插入图片描述
css:

.cl {
            clear: both;
        }

<body>
    <div class="box">
        <p></p>
        <p></p>
    </div>

    <div class="cl"></div>
    
    <div class="box2">
        <p></p>
        <p></p>
    </div>
</body>

优点: 可以用div的height模仿margin的高度
缺点: 父盒子高度不能自适应

方法四: 内墙法

在父元素内部，所有的浮动子元素后面添加一个空的

元素，标签高度为 0，添加 clear 属性。

在这里插入图片描述

.cl {
            clear: both;
        }

<body>
    <div class="box">
        <p></p>
        <p></p>
        <div class="cl"></div>
    </div>
    <!-- 方法三: 外墙法 -->
    <!-- <div class="cl"></div> -->
    
    <div class="box2">
        <p></p>
        <p></p>
        <div class="cl"></div>
    </div>
</body>

优点: 可以解决所有问题, margin不会塌陷, 父盒子高度可以自适应

.box, .box2 {
            width: 1000px;
            /* 方法一: 设置父元素高度 */
            /* height: 50px; */
            border: 2px solid red;
            /* 方法二: 父元素设置clear:both */
            /* clear: both; */
            margin: 10px;
        }

在这里插入图片描述
缺点: 使用html的代码解决css的问题, 造成结构冗余

方法五: 伪类

本质是使用伪类方法利用css代码书写一堵内墙。

伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。 :after：这个伪类表示选中的是某个标签内部的最后的位置。

书写方法：前面必须加普通的选择器，后面连续书写伪类名称。将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。

.clearfix:after {
            content: "1";
            display: block;
            height: 0px;  /*不让文字1撑高位置*/
            clear: both;
            visibility: hidden; /*隐藏属性, 与overflow: hidden的区别在于它不会让出位置*/
        }

<body>
    <div class="box clearfix">
        <p></p>
        <p></p>
        <!-- 内墙法 -->
        <!-- <div class="cl"></div> -->
    </div>
    <!-- 方法三: 外墙法 -->
    <!-- <div class="cl"></div> -->
    
    <div class="box2 clearfix">
        <p></p>
        <p></p>
        <!-- 内墙法 -->
        <!-- <div class="cl"></div> -->
    </div>
</body>

在这里插入图片描述
可以解决所有问题

方法六: 溢出隐藏

给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以解决浮动的所有问题.

overflow属性:

元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏。
元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度。

高度自适应原因：
一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。

浮动不影响后面的元素：
父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。

.box, .box2 {
            width: 1000px;
            /* 方法一: 设置父元素高度 */
            /* height: 50px; */
            border: 2px solid red;
            /* 方法二: 父元素设置clear:both */
            /* clear: both; */
            overflow: hidden;
        }

在这里插入图片描述

总结

如果父元素高度是固定的，建议使用 height 属性解决。
如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。

Charonmomo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
[CSS] - 几种清除浮动的方法总结

背景有两个div父盒子, 内部子元素是浮动的:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0
复制链接

扫一扫