CSS清除浮动的几种常见方法

最新推荐文章于 2023-10-23 21:02:00 发布
最新推荐文章于 2023-10-23 21:02:00 发布
阅读量998 收藏 4
点赞数 2
分类专栏： 前端 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41996454/article/details/108830372
版权

文章目录





浮动

当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变得好像浮动元素不存在一样。

优点

  • 在图文混排的时候可以很好的使文字环绕在图片周围

  • 当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的：第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

缺点

  • 浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素的高度塌陷

清除浮动





一、额外标签法

额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

添加空标签，并设置样式。

  • clear:left 清除左浮动

  • clear:right 清除右浮动

  • clear:both 清除左右浮动

  • clear:none 左右浮动都不清除

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper{
            width: 600px;
            border: 2px solid black;
        }
        .box1, .box2, .box3 {
            width: 200px;
            height: 150px;
        }

        .box1 {
            background-color: #FF0000;
            float: left;
        }

        .box2 {
            background-color: blue;
            float: left;
        }
        .box3 {
            background-color: green;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="clear"></div>
    <div class="box3">box3</div>
</div>

</body>
</html>

clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来

img

二、父级添加overflow属性

在要清除浮动父级添加样式：overflow:hidden

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，可在元素浮动的父级盒子添加样式overflow:hidden。

<div class="parents" style="overflow:hidden;"></div>

属性值：

visible:默认值。内容不会被修建，会呈现在元素框之外，不剪切页不添加滚动条。

auto:不显示超出内容，不剪切，会按照内容是否超出，自动添加，可用作清除浮动。

hidden：内容会被修建，且剩余内容不可见，此属性还有清除浮动、清除margin-top塌陷的功能。

scroll:内容会被修建，但是浏览器会显示滚动条以便查看剩余内容。

原理：触发BFC（块格式化上下文）。

当元素设置了overflow样式，且值不为visible时，该元素就建构了一个BFC(哪些情况下，元素可以建构出BFC，可以看查看CSS文档对BFC的定义)。在我们的例子中，父盒子因设置了值为hidden的overflow样式，所以该元素建构出一个BFC，按照第三个特点，BFC的高度是要包括浮动元素的，所以父盒子的高度被撑起来，达到了清除浮动影响的目的。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper {
            width: 600px;
            border: 2px solid black;
            margin: 50px auto;

            /*清除浮动*/
            overflow: hidden;
        }

        .box1, .box2, .box3 {
            width: 200px;
            height: 150px;
        }

        .box1 {
            background-color: #FF0000;
            float: left;
        }

        .box2 {
            background-color: blue;
            float: left;
        }

        .box3 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>

</div>
<div class="box3">box3</div>

</body>
</html>

原理

  • 通过触发BFC方式，实现清除浮动

优点

  • 代码简洁

缺点

  • 内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

推荐使用

img

三、使用：after

为了减少多余的空标签，可采用给父级的伪元素添加样式实现清除浮动。

.clear:after{
	display:block;
	content:'';
	clear:both
}

该样式在clear，即父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。注意到该伪元素的display值为block，即，它是一个不可见的块级元素（有的地方使用table，因为table也是一个块级元素）。你可能已经意识到，这也只不过是前一种清除浮动方法（添加空白div）的另一种变形，其底层逻辑也是完全一样的。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper {
            width: 600px;
            border: 2px solid black;
            margin: 50px auto;
        }

        .wrapper:after {
            /*    清除浮动*/
            content: "";
            display: block;
            clear: both;
        }

        .box1, .box2, .box3 {
            width: 200px;
            height: 150px;
        }

        .box1 {
            background-color: #FF0000;
            float: left;
        }

        .box2 {
            background-color: blue;
            float: left;
        }

        .box3 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>
<div class="box3">box3</div>

</body>
</html>

img

四、使用双伪元素

同时使用:befor和:after。

原理和前者大差不差。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper {
            width: 600px;
            border: 2px solid black;
            margin: 50px auto;
        }
        /* 清除浮动 */
        .wrapper:after,.wrapper:before{
            content: "";
            display: table;
        }
        .wrapper:after{
            clear: both;
        }

        .box1, .box2, .box3 {
            width: 200px;
            height: 150px;
        }

        .box1 {
            background-color: #FF0000;
            float: left;
        }

        .box2 {
            background-color: blue;
            float: left;
        }

        .box3 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>
<div class="box3">box3</div>

</body>
</html>

img

五、手动设置父级高度

因为父盒子没有设定高度，所以才会塌陷，这种时候可以手动给父盒子设置高度，不让它塌陷。

但是，不推荐使用！面试时候可以提一嘴。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper {
            width: 600px;
            border: 2px solid black;
            margin: 50px auto;
        /*    手动指定高度*/
            height: 300px;
        }


        .box1, .box2, .box3 {
            width: 200px;
            height: 150px;
        }

        .box1 {
            background-color: #FF0000;
            float: left;
        }

        .box2 {
            background-color: blue;
            float: left;
        }

        .box3 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>
<div class="box3">box3</div>

</body>
</html>

img

注意

在实际项目开发中，一般首选第二种方法。

豆子前端
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css清除浮动无效,css清除浮动的处理方法
weixin_36300623的博客
08-03 1431
根据《精彩绝伦的css》JS Bin.news{outline:1px solid pink}.col{float: left;width:33%;outline:1px solid blue;}some text-oneConHugeCo has permanently altered the theory of niches. What do we morph? Anything and ev...
css清除浮动的几种方法和示例
09-25
以下介绍几种常见的CSS清除浮动的方法： 1. 使用`clear`属性： 这是最基础的清除浮动方式。通过设置`clear`属性，我们可以指定元素不允许与浮动元素相邻。例如，将`.clr{clear:both;}`应用到元素上，使得这个元素...
css清除浮动的几种方式
潮汐未见潮落的博客
05-30 1万+
CSS 清除浮动的几种常用方法
CSS清除浮动的几种方法
web前端开发
02-08 2046
来源 |https://www.html.cn/web/css/19613.html今天这篇文章给大家介绍一下CSS清除浮动的几种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对...
css清除浮动的六种方法
m0_45884629的博客
02-22 3273
css中使用float属性时会造成局部坍塌或者内容上顶以及文字环绕等一系列情况出现。 总结了一共六种方法其中有两种最为常用： 1、height属性给父元素设置固定高度 当父元素下的子元素进行了浮动时，我们可以给父元素设置固定的高度让父元素的高度高于子元素。 缺点：父元素的高度是固定的当子元素的高度变化需要修改父元素比较麻烦。 适用点：父子元素的高度都是固定的时候。 2、clear元素 css中有clear元素属性有三个 right清除右浮动 left清除左浮动 both清除所有浮动 clear可以清除浮动
css清除浮动的四种方法(详细)
weixin_45842954的博客
06-01 1万+
css清除浮动的四种方式
css清除浮动的几种方法
Alenjust
08-13 88
清除浮动的几种方法 标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。 浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。 为什么要清除浮动呢？清除浮动的本质是什么？ 清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。 清除浮动的方法： 额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。
关于css清除浮动的几种方法
st521314mt的博客
07-01 228
清除浮动的方式： 给前面一个父元素设置高度 给后面的盒子添加clear属性 隔墙法：其又分为外墙法和内墙法 利用伪元素选择器清除浮动 利用overflow: hidden清除浮动 下面一一介绍： 1、给前面一个父元素设置高度 注意点：在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8".
清除浮动的几种方法
f_rivulet的博客
07-11 483
清除浮动的几种方法          虽然浮动能在不少地方发挥作用，很多时候用起来也的确很方便，但是有很多时候也正是因为浮动，所以原本该在预想地方的盒子或其他元素、内容与前面的东西叠在了一起，这就是因为浮动的元素脱标了，所以后面的元素才会误认为那块地方没有东西，才会跑上去，导致重叠的现象。那么常用的清除浮动的方法有哪些呢？     1.给父盒子加overflow:hidden，这样既清除了浮动
CSS 清除浮动的几种方法
最新发布
wangxuanyang_zer的博客
10-23 39
先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden;（这个元素的高为 0 行高也为 0 并且这个元素清除了浮动）在页面的 clearfix 元素后面添加了一个空的块级元素。在浮动的盒子下面再放一个标签，使用 clear:both;伪元素：在页面上不存在的元素，但是可以通过 css 添加上去。b 外部标签：只能将浮动盒子的影响清除，但是不会撑开盒子。:before(在。清除浮动： 核心：clear:both;3.使用伪元素清除浮动(用的最多)注意：每个元素都有自己的伪元素。
CSS清除浮动的常用方法优缺点分析
09-27
为了解决这个问题，开发者通常会采用几种不同的清除浮动（clear float）方法。下面我们将详细探讨这些方法的优缺点。 1. **额外元素法** 这种方法是在浮动元素后面添加一个额外的非浮动元素，如`...
css如何清除浮动常用的方法有哪些
12-13
如何清除浮动？ 方法1： #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2： #test{display:block;zoom:1;overflow:hidden;} #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height 方法3...
DIV+CSS 清除浮动常用方法总结
12-13
以下是对几种常见的浮动清除方法的详细解释： 1. **使用`clear: both`**： 当所有子元素都浮动时，可以在最后一个子元素或一个额外的空元素上应用`clear: both`属性。这会使该元素清除之前所有浮动的影响，从而...
CSS 清除浮动方法大全
09-25
以下是对几种常见的CSS清除浮动方法的详细解释： 1. **伪类`:after`**： 使用CSS的`:after`伪类可以添加一个看不见的元素来清除浮动。通过设置`content: ""`和`clear: both`，这个看不见的元素将强制父元素扩展以...
如何在vue3中优雅地使用v-model？
热门推荐
SCUhzs
09-25 2万+
文章目录Vue中的数据绑定v-bindv-bind支持的类型v-bind使用v-modelvue2中v-model用法不使用v-model的双向绑定父组件子组件使用v-model后父组件子组件问题.syncvue2中使用v-model + .sync父组件子组件vue3中v-model的使用父组件子组件总结 Vue中的数据绑定 绑定数据有三种方式： 插值，也就是{{name}}的形式，以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg：v-bind:c
Js实现数组的指定位置的插入方法insert()
SCUhzs
09-26 1万+
文章目录前言Array.prototype.splice()定义和用法语法返回值说明实现insert()插入函数 前言 js的数组中没有插入方法，实现插入需要通过splice间接地实现。 Array.prototype.splice() 定义和用法 splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 **注释：**该方法会改变原始数组。 语法 arrayObject.splice(index,howmany,item1,.....,itemX) 参数 描述 index
纯css的吸顶效果实现——使用“position:sticky”
SCUhzs
07-30 7679
文章目录一.sticky用法1.1 示例11.2 示例2二.sticky使用过程中的坑2.1 只在 Containing Block 内有效2.2 Overflow对Sticky的影响2.3.兼容问题三.应用场景3.1 表格的查看3.2 导航栏、栏目条等吸顶效果四、参考资料 一.sticky用法 使用 CSS Sticky 需要两个条件。 position: sticky; top: 0; /*top/right/bottom/left 任一有效值*/ top：0 意思是当元素滑动到距离视口 0
[js进阶]axios+FormData文件上传
SCUhzs
03-29 7662
axios+FormData实现带文件表单的上传
CSS清除浮动：方法与解析
"本文主要探讨了在CSS布局中如何处理浮动元素导致的父容器高度塌陷问题，并介绍了几种常见的解决方案，包括使用额外标签、:after伪类、设置overflow以及浮动父容器本身。" 在Web开发中，浮动元素（floats）被广泛...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值