清除浮动

最新推荐文章于 2024-07-03 19:41:47 发布
最新推荐文章于 2024-07-03 19:41:47 发布
阅读量106 收藏
点赞数
分类专栏： float 文章标签： html html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47352853/article/details/113540075
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

    最初，引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。但 大家很快意识到，它可以浮动任何东西，而不仅仅是图像，所以浮动的使用范围扩大了。
    当我们在网页各处使用 float 的时候，也由此引发的一些副作用，如：父元素塌陷、元素重叠，清除浮动也就是清除这些副作用。

一、浮动的特性

一、盖不住

浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示。

<html>
<head>
<title>浮动元素的性质</title>
<style type="text/css">
         *{
             margin:0;
             padding:0;
         }
         .box{
             width: 300px;
             height: 200px;
             padding: 50px;
             margin: 50px;
             background: red;
         }
         .inner{
             width: 100px;
             height: 100px;
             background: green;
             float: right;
         }
     </style>
 </head>
 <body>
     <div class='box'>
         <div class='inner'>浮动元素</div>
     </div>
 </body>
 </html>

浮动特性

二、不会溢出

浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个（实例中为父元素）任意非浮动元素靠齐。

W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
300
<html>
<head>
<title>浮动元素的性质</title>
<style type="text/css">
         *{
             margin:0;
             padding:0;
         }
         .box{
             width: 300px;
             height: 200px;
             padding: 50px;
             margin: 50px;
             background: red;
         }
         .inner{
             width: 100px;
             height: 100px;
             background: green;
             float: left;
         }
         .notfloat{
             width: 200px;
             height: 200px;
             background: pink;
         }
     </style>
 </head>
 <body>
     <div class='box'>
         <div class='inner'>浮动元素</div>
         <div class='notfloat'>浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐。边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
　　　　　　　</div>
     </div>
 </body>
 </html>

不会溢出

三、浮动元素后面的内联元素会向此浮动元素的外边距靠齐。

<html>
<head>
<title>浮动元素的性质</title>
<style type="text/css">
         *{
             margin:0;
             padding:0;
         }
         .box{
             width: 300px;
             height: 200px;
             padding: 50px;
             margin: 50px;
             background: red;
         }
         .inner{
             width: 100px;
             height: 100px;
             margin: 10px;
             background: green;
             float: left;
         }
         .notfloat{
             background: pink;
         }
     </style>
 </head>
 <body>
     <div class='box'>
         <div class='inner'>浮动元素</div>
         <span class='notfloat'> 
             浮动元素后面的内联元素会向此浮动元素的外边距靠齐
         </span>
     </div>
 </body>
 </html>

对齐

四、浮动元素的上一个元素如果没有浮动，浮动只在当前行浮动；当浮动遇到浮动，它们将在一行排序，除非没有位置了

<html>
<head>
<title>浮动元素的性质</title>
<style>
        *{
            margin:0;
            padding:0;
        }
       div{
           width:100px;
           height:100px;
       }
        .item1{
            background-color: pink;
        }
        .item2{
            float:left;
            background-color: green;
        }
        .item3{
            float:left;
            background-color: Purple;
        }
</style>
<body>
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</body>
 </html>

浮动的特性

二、清除浮动的方法

一、利用 clear 属性

1. 为 float 元素后的元素添加 clear 属性（额外标签法）

给谁清除浮动，就在其后额外添加一个空白标签 。

  • 优点：通俗易懂，书写方便。（不推荐使用）
  • 缺点：添加许多无意义的标签，结构化比较差。
插入前

代码如下（示例）：

<html>
<head>
<title>为 float 元素后的元素添加 clear 属性</title>
</head>
<style>
    .a,.b{
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    .a{
        float: left;
    }
    .b{
        float: right;
    }
    .c{
        height: 50px;
        border: 3px solid green;
    }
</style>
<body>
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
</body>
</html>

插入前

插入后

代码如下（示例）：

<html>
<head>
<title>为 float 元素后的元素添加 clear 属性</title>
</head>
<style>
    .a,.b{
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    .a{
        float: left;
    }
    .b{
        float: right;
    }
    .c{
        height: 50px;
        border: 3px solid green;
    }
    /* 清除浮动代码 */
    .c{clear:both}
</style>
<body>
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
</body>
</html>

插入后

2. 使用after伪元素清除浮动

after方式为空元素的升级版，好处是不用单独加标签了。（较常用）

  • 优点：符合闭合浮动思想，结构语义化正确
  • 缺点：由于IE6-7不支持：after，使用zoom：1，触发hasLayout。
使用前

代码如下（示例）：

<html>
<head>
<title>使用after伪元素清除浮动</title>
</head>
<style>
    .parent{
        border: 3px solid red;
    }
    .a,.b{
        height: 100px;
        width: 100px;
        border: 1px solid green;
    }
    .a{
        float: left;
    }
    .b{
        float: right;
    }
    
</style>
<body>
    <div class="parent clearfix">
        <div class="a">a</div>
        <div class="b">b</div>
    </div>
</body>
</html>

清除浮动前

使用后

代码如下（示例）：

<html>
<head>
<title>使用after伪元素清除浮动</title>
</head>
<style>
    .parent{
        border: 3px solid red;
    }
    .a,.b{
        height: 100px;
        width: 100px;
        border: 1px solid green;
    }
    .a{
        float: left;
    }
    .b{
        float: right;
    }
    /* 清除浮动代码 */
    .clearfix::after{
        content: "";
        display: block;
        clear: both;
    }
</style>
<body>
    <div class="parent clearfix">
        <div class="a">a</div>
        <div class="b">b</div>
    </div>
</body>
</html>

使用后

二、父级添加overflow方法

  • 优点：代码简洁（慎重使用，若该父盒子里还有position定位会引起麻烦）
  • 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

hidden 内容会被修剪，并且其余内容是不可见的。hidden
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。auto

使用前

代码如下（示例）：

<html>
<head>
<title>父级添加overflow属性</title>
</head>
<style>
    .parent{
        border: 3px solid red;
    }
    .a,.b{
        height: 100px;
        width: 100px;
        border: 1px solid green;
    }
    .a{
        float: left;
    }
    .b{
        float: right;
    }
</style>
<body>
    <div class="parent fahter">
        <div class="a">a</div>
        <div class="b">b</div>
    </div>
</body>
</html>

插入前

使用后

代码如下（示例）：

<html>
<head>
<title>父级添加overflow属性</title>
</head>
<style>
    .parent{
        border: 3px solid red;
    }
    .a,.b{
        height: 100px;
        width: 100px;
        border: 1px solid green;
    }
    .a{
        float: left;
    }
    .b{
        float: right;
    }
    /* 清除浮动代码 */
    .fahter{
        overflow: auto;
    }
</style>
<body>
    <div class="parent fahter">
        <div class="a">a</div>
        <div class="b">b</div>
    </div>
</body>
</html>

使用后

三、父级div也一起浮动

所有代码一起浮动，就变成了一个整体

  • 优点：没有优点
  • 缺点：会产生新的浮动问题。
使用前

代码如下（示例）：

<html>
<head>
<title>父级div也一起浮动</title>
</head>
<style>
    .parent{
        border: 3px solid red;
    }
    .a,.b{
        height: 100px;
        width: 100px;
        border: 1px solid green;
    }
    .a{
        float: left;
    }
    .b{
        float: right;
    }
</style>
<body>
    <div class="parent fahter">
        <div class="a">a</div>
        <div class="b">b</div>
    </div>
</body>
</html>

使用前

使用后

代码如下（示例）：

<html>
<head>
<title>父级div也一起浮动</title>
</head>
<style>
    .parent{
        border: 3px solid red;
    }
    .a,.b{
        height: 100px;
        width: 100px;
        border: 1px solid green;
    }
    .a{
        float: left;
    }
    .b{
        float: right;
    }
    /* 清除浮动代码 */
    .fahter{
        float: left;
    }
</style>
<body>
    <div class="parent fahter">
        <div class="a">a</div>
        <div class="b">b</div>
    </div>
</body>
</html>

使用后

四、父级div定义height

父级div手动定义height，就解决了父级div无法自动获取到高度的问题

  • 优点：简单，代码少，容易掌握
  • 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
使用前

代码如下（示例）：

<html>
<head>
<title>父级div定义height</title>
</head>
<style>
    .parent{
        border: 3px solid red;
    }
    .a,.b{
        height: 100px;
        width: 100px;
        border: 1px solid green;
    }
    .a{
        float: left;
    }
    .b{
        float: right;
    }
</style>
<body>
    <div class="parent fahter">
        <div class="a">a</div>
        <div class="b">b</div>
    </div>
</body>
</html>

定义前

使用后

代码如下（示例）：

<html>
<head>
<title>父级div定义height</title>
</head>
<style>
    .parent{
        border: 3px solid red;
    }
    .a,.b{
        height: 100px;
        width: 100px;
        border: 1px solid green;
    }
    .a{
        float: left;
    }
    .b{
        float: right;
    }
    /* 清除浮动代码 */
    .fahter{
        height: 200px;
    }
</style>
<body>
    <div class="parent fahter">
        <div class="a">a</div>
        <div class="b">b</div>
    </div>
</body>
</html>

定义后

总结

熟系并掌握浮动和清除浮动的方法。

我就不开心灬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css清除浮动无效,css清除浮动的处理方法
weixin_36300623的博客
08-03 1415
根据《精彩绝伦的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清除浮动无效,CSS清除浮动方法总结
weixin_36002897的博客
08-03 1259
清除浮动的原因假设一个 div 内部有个浮动的 div，当内部 div 的高度要比外层的父级 div 高度大时，将会导致父级 div 高度无法随着内部 div 的高度自适应，这是由于浮动元素已经脱离了正常文档流，因此无法对父级元素产生影响。举例如下：复制代码代码如下:#a {width: 100px;border: 1px solid #ccc;}#b {height: 50px;float: l...
HTML之清除浮动
小正子
06-23 754
1.为什么要清除浮动？ 由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响，这时候就需要在该元素中清除浮动。 2.清除浮动的基本语法格式 在css中，clear属性用于清除浮动，其基本语法格式如下： 选择器｛ clear：属性值； ｝ clear属性常用的值： 属性值 描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允
浮动 及清除浮动
weixin_69232086的博客
12-13 507
什么是浮动？ 清除浮动的常用方法有哪些？
为什么要清除浮动？清除浮动的方式？
小花猫哒小栗子
06-03 2850
清除浮动是为了清除使用浮动元素产生的影响：浮动的元素，高度会塌陷，而高度的塌陷使我们页面后i按的布局不能正常显示。 清除浮动的方式： 1、额外标签法：给谁清除浮动，就在其后额外添加一个空白标签。 优点：通俗易懂，书写方便。 缺点：添加许多无意义的标签，结构化比较差。 2、父级添加overflow方法：可以通过触发BFC的方式，实现清除浮动的结果。 优点：代码简洁，慎用，若该父盒子里还有position定位会引起麻烦。 缺点：内容增加多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。 ove.
CSS 清除浮动
韬光养晦
07-25 946
CSS 清除浮动
浮动和清除浮动
weixin_47267628的博客
12-29 621
浮动float 浮动的概念 有很多的布局效果，标准流没有不能完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 浮动float float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 语法： 选择器 { float : 属性值; } 属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 right 元素向右浮动 浮动特性（重难
html清除浮动用意,清浮动 | 为何要清除浮动
weixin_28909779的博客
06-11 419
清浮动 | 为何要清除浮动(闭合浮动)HTML5学堂：在文档中存在几种不同的元素表现形式，一种是正常状态，还有两种是设置浮动或者定位的状态。浮动之后的元素，通常我们需要“闭合浮动”，那么闭合浮动的意义何在呢？作为定位又是否脱离了文档流呢？CSS中的定位机制普通流，浮动，定位。普通流普通流 (normal flow)，或者称之为常规流。也是我们通常称呼的“文档流”。浮动浮动的框可以左右移动，直至它的...
清除浮动（详解）
wwwjjjjj666的博客
12-06 2519
清除浮动（详解）
浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么
09-25
因此，我们需要“清除浮动”或者说“闭合浮动”，以确保容器能够正确包裹其内的浮动元素。常见的清除浮动方法包括： 1. 添加额外的标签：在浮动元素后面插入一个带有`clear:both`样式的空`div`，这样可以创建一个新...
CSS的clear属性清除浮动的基本用法示例
09-24
清除浮动是指通过CSS样式来防止浮动元素对周围元素的影响，确保非浮动元素或后续元素能够正确地在页面上定位，避免内容溢出容器。这通常是为了恢复父容器的正常高度计算，使其能完全包裹住内部的浮动元素。 **使用`...
css 怎么清除浮动
09-25
标题中的“css 怎么清除浮动”是一个关于CSS布局中常见的问题，特别是在处理浮动元素时。浮动元素会导致其父元素的高度塌陷，因此需要清除浮动以保持布局的正常显示。描述部分提到的站点更新、JS压缩等是网站优化的...
css清除浮动的几种方法以及对应规范说明
09-25
CSS清除浮动是为了处理浮动元素对周围元素布局的影响，特别是防止父元素因浮动元素而高度塌陷。以下是对清除浮动的几种方法及其规范说明的详细解释： 1. **使用`clear:both`** 当一个元素设置`clear:both`时，这个...
CSS教程 伪清除浮动
09-25
为了解决这个问题，我们可以采用不同的清除浮动（Clear Float）方法，其中“伪清除浮动”是一种常见的解决方案。 在传统的清除浮动方式中，我们通常会在浮动元素后面添加一个额外的元素，并设置`clear:both`属性，...
如何用简单的html，css，js写出一个带有背景层的删除弹出框
qq_56776909的博客
07-03 374
虽然每次项目都是主要写后端，但是有时候前端的样式太丑了，也有点看不下去。弹出框是项目中用的比较多的，比如删除，修改或者添加什么的，都需要一个弹出框。所以这里简单记录一下，应该如何实现。
html之内联样式
abments的博客
07-02 432
内联样式（inline styles）是在HTML元素的style属性中直接定义的CSS样式。与外部样式表或内部样式表不同，内联样式仅应用于特定的HTML元素。使用内联样式时，可以在HTML标签中直接添加样式，而无需通过外部或内部的CSS文件引用样式规则。
HTML CSS 基础复习笔记 - 表格标签使用
forevercui的博客
07-03 402
web复习笔记
同时用C++和HTML同时做一个饭店价格统计器
最新发布
weixin_56334307的博客
07-03 197
大家有没有想过在饭店的时候我们讲了很多的不同的大碗小碗的饭算价格要算很久但是利用这个程序就不需要算很久了完了我们可以用c++和html实现这个计算。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值