（三）清除浮动

最新推荐文章于 2024-03-29 03:54:52 发布
最新推荐文章于 2024-03-29 03:54:52 发布
阅读量159 收藏 1
点赞数 1
分类专栏： 前端基础 文章标签： css3 css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47481102/article/details/124845126
版权

思考：

前面说到的浮动元素有一个标准流的父级元素，他们有一个共同的特点，都是有高度的。

但是，所有的父级盒子都必需要有高度吗？

答：理想状态下，让盒子撑开父亲，有多少孩子，父级就有多高。

但是。。。。。。

1.为什么需要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

  • 由于浮动元素不占原文档流的位置，所以他会对后面的元素排版产生影响
<!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>
      .box {
        width: 800px;
        background-color: antiquewhite;
        margin: auto;
        border: 1px solid black;
      }

      .damao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: aqua;
      }

      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: aquamarine;
      }

      .footer {
        height: 400px;
        width: 800px;
        background-color: orange;
        margin: auto;
      }

      /* 父级盒子很多情况下不方便设置高度，但是子盒子浮动不占有位置，最后父级盒子的高度为0，
就会影响下面的标准流盒子 > 下面的标准流盒子移动到子盒子浮动的下面，此时需要清除浮动 */
    </style>
  </head>
  <body>
    <div class="box">
      <div class="damao">大毛浮动</div>
      <div class="ermao">二毛浮动</div>
    </div>
    <div class="footer">底盒子不浮动</div>
  </body>
</html>

2.清除浮动本质 

  • 清除浮动的本质是清除浮动元素造成的影响；
  • 如果父盒子本身有高度，则不需要清除浮动；
  • 清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了；

3.清除浮动

语法：

选择器{clear：属性值；}

 

属性值描述
left不允许左侧有浮动元素（清除左侧浮动元素）
right不允许右侧有浮动元素（清除右侧浮动元素）
both同时清除左右两侧浮动的影响

实际工作中，几乎只用clear：both；

清除浮动的策略是：闭合浮动；

3.清除浮动方法

  1. 额外标签法也称之为隔墙法，是W3C推荐的做法；
  2. 父级添加overflow属性；
  3. 父级添加after伪元素；
  4. 父级添加双伪元素；

3.1.清除浮动——额外标签法

额外标签法也称之为隔墙法，是W3C推荐的做法。

额外标签法会在浮动元素魔噩日添加一个空标签。如<div style="clear:both"></div>,或者其他标签（如<br/>等）。

  • 优点：通俗易懂，书写方便
  • 缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素。

总结：

1.清除浮动本质是？

清除浮动的本质是清除浮动元素脱离标准流造成的影响

2.清除浮动策略？

闭合浮动。只要让浮动在父级盒子内部影响，不影响父级盒子外面的其他盒子。

3.额外标签法？

又称之为隔墙法，就是在会后有一个浮动的子盒子元素后面添加一个新的额外的空标签，清除浮动样式。

<!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>
      .box {
        width: 800px;
        background-color: antiquewhite;
        margin: auto;
        /* border: 1px solid black; */
      }

      .damao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: aqua;
      }

      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: aquamarine;
      }

      .footer {
        height: 100px;
        width: 800px;
        background-color: orange;
        margin: auto;
      }

      /* 父级盒子很多情况下不方便设置高度，但是子盒子浮动不占有位置，最后父级盒子的高度为0，
就会影响下面的标准流盒子 > 下面的标准流盒子移动到子盒子浮动的下面，此时需要清除浮动 */
      /* 清除浮动语法：
      选择器{clear：属性值；}
      属性值left、right、both，实际工作中几乎只用clear：both */
      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="damao">大毛浮动</div>
      <div class="ermao">二毛浮动</div>

      <!-- 清除浮动方法一：额外标签法
      在浮动元素末尾添加一个空标签，例如：<div style="clear :both"></div>,
或者其他标签如</br>等 
    *** 注意：要求这个新的空标签必须是块级元素-->
      <div class="clear"></div>
    </div>
    <div class="footer">额外标签法</div>
  </body>
</html>

3.2.清除浮动——父级添加overflow

可以给父级添加overflow属性，将其属性值设置为hidden、auto或者scroll；

注意：是给父级元素添加代码

  • 优点：代码简介
  • 缺点：无法显示溢出的部分

 

<!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>父级添加overflow</title>
    <style>
      .box {
        /* 清除浮动方法二-父级添加overflow属性，将其属性值设置为hidden、auto、scroll。 */
        overflow: hidden;

        width: 800px;
        background-color: antiquewhite;
        margin: auto;
        /* border: 1px solid black; */
      }

      .damao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: aqua;
      }

      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: aquamarine;
      }

      .footer {
        height: 100px;
        width: 800px;
        background-color: orange;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="damao">大毛浮动</div>
      <div class="ermao">二毛浮动</div>
    </div>
    <div class="footer">父级添加overflow</div>
  </body>
</html>

3.3.清除浮动——父级添加：after伪元素

：after方式是额外标签法的升级版，也是给父级元素添加

.clearfix:after {

        content: "";

        display: block;

        height: 0;

        clear: both;

        visibility: hidden;

      }

      .clearfix {

        /* IE6、7专有 */

        *zoom: 1;

      }

  •  优点：没有增加标签，结构简洁
  • 缺点：照顾低版本浏览器
  • 代表网站：百度、淘宝等

 

<!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>
      /* 添加after伪元素样式，父级调用 */
      .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }

      .clearfix {
        /* IE6、7专有 */
        *zoom: 1;
      }

      .box {
        width: 800px;
        background-color: antiquewhite;
        margin: auto;
        /* border: 1px solid black; */
      }

      .damao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: aqua;
      }

      .ermao {
        float: left;
        width: 300px;
        height: 200px;
        background-color: aquamarine;
      }

      .footer {
        height: 100px;
        width: 800px;
        background-color: orange;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div class="damao">大毛浮动</div>
      <div class="ermao">二毛浮动</div>
    </div>
    <div class="footer">父级添加after伪元素</div>
  </body>
</html>

3.4.清除浮动——父级添加双伪元素清除浮动

也是给父级元素添加

.clearfix:before,

      .clearfix:after {

        content: "";

        display: table;

      }

      .clearfix:after {

        clear: both;

      }

      .clearfix {

        *zoom: 1;

      }

  •  优点：代码更简洁
  • 缺点：照顾低版本浏览器
  • 代表网站：小米、腾讯等

 

<!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>双伪元素清除浮动</title>
    <style>
      /* 添加双伪元素，父级调用 */
      .clearfix:before,
      .clearfix:after {
        content: "";
        display: table;
      }

      .clearfix:after {
        clear: both;
      }

      .clearfix {
        *zoom: 1;
      }

      .box {
        width: 800px;
        background-color: antiquewhite;
        margin: auto;
        /* border: 1px solid black; */
      }

      .damao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: aqua;
      }

      .ermao {
        float: left;
        width: 300px;
        height: 200px;
        background-color: aquamarine;
      }

      .footer {
        height: 200px;
        width: 800px;
        background-color: orange;
        margin: auto;
      }

      /* 父级盒子很多情况下不方便设置高度，但是子盒子浮动不占有位置，最后父级盒子的高度为0，就会影响下面的标准流盒子 > 下面的标准流盒子移动到子盒子浮动的下面，此时需要清除浮动 */
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div class="damao">大毛浮动</div>
      <div class="ermao">二毛浮动</div>
    </div>
    <div class="footer">双伪元素清除浮动</div>
  </body>
</html>

3.4.总结：为什么需要清除浮动？

  1. 父级没有高度
  2. 子盒子浮动了
  3. 影响下面布局了，就应该清除浮动

倔强的小白菜
关注
专栏目录
CSS 系列四 浮动 和 清除浮动
m0_55170432的博客
04-13 380
--------------------------- 四 浮动 float --------------------------- 1.1 传统网页布局的三种方式 CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)： 普通流（标准流） 浮动 定位 1.2 标准流（普通流/文档流） 所谓的标准流: 就是标签按照规定好默认方式排列. 块级元素会独占一行，从上向下顺序排列。 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序
清除浮动的方法
m0_55916923的博客
05-25 116
一、清除浮动的原因 在实际应用中，父盒子一般是不方便给高度的，但子盒子常常需要设置浮动进行排版。我们知道，浮动的盒子是不占有位置的，若父盒子又没有设置高度，那么会使父盒子的高度变为0，影响到后面的标准流盒子。 二、清除浮动的本质和语法 1.本质：就是清除浮动元素造成的影响，清除浮动之后，父盒子就会根据浮动的子盒子自动检测高度，子盒子占有多高，父盒子就有多高。父盒子有了高度之后，就不会影响后面的标准流盒子了。 2.语法：选择器{clear：属性值；} 属性值有三个： left：不允许左侧有浮动元素（
清除浮动的三种方法
m0_58722539的博客
03-01 200
*{ margin: 0; padding: 0; } li{ list-style-type: none; } a{ text-decoration: none; } div{ width: 520px; height: 280px; ...
CSS-21.清除浮动的常用方式（隔墙法）
别忘了缩进的博客
01-30 907
隔墙法： 外墙法： 1.在两个盒子中间添加一个额外的块级元素 2.给这个额外添加的块级元素设置clear:both;属性 注意点：外墙法它可以让第二个盒子使用margin-top属性 外墙法不可以让第一个盒子使用margin-bottom属性 内墙法： 1.在第一个盒子中所有子元素最后添加一个额外的块级元素 2.给这个额外添加的块级元素设置clear:bot
清除浮动的四种方法
lancelote_pc的博客
04-06 280
清除浮动的几种方法 今天面试 被问了一个常考的问题 如何清除浮动，本身这个技术没总结过，加上嘴笨 ，回答的不怎么样，于是简单的整理一下 1.为什么清除浮动 总是要清除浮动，为什么呢，使用浮动之后出现什么预期之外的显示效果要清除浮动，总结一下，我认为是为了解决浮动带来的高度塌陷 2.高度塌陷 先给一个父元素 只设置宽度，不设置高度，给一个边框，这样会看的更清楚。再给两个子元素 first ...
CSS的clear属性清除浮动的基本用法示例
09-24
清除浮动是指通过CSS样式来防止浮动元素对周围元素的影响，确保非浮动元素或后续元素能够正确地在页面上定位，避免内容溢出容器。这通常是为了恢复父容器的正常高度计算，使其能完全包裹住内部的浮动元素。 **使用`...
浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么
01-19
我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？ 很多人都已经习惯称之为清除...
Float浮动与清除浮动
01-08
浮动（Float）是CSS布局中一个重要的概念，用于创建网页元素的水平排列，尤其是在传统的流式布局中。...需要注意的是，不同清除浮动的方法适用于不同的场景，开发者应根据项目需求和浏览器兼容性选择合适的方法。
css别忘记清除浮动clear:both
10-30
### CSS清除浮动技巧详解 在CSS布局中，浮动（float）是一种非常常用的技术，它可以使得元素脱离正常的文档流，向左或向右移动，而周围的元素则会围绕它进行排列。然而，当一个父元素内所有的子元素都进行了浮动...
CSS清除浮动float的三种方法小结
09-24
为了解决这个问题，我们有三种主要的清除浮动（clear float）方法。 1. 添加新元素并应用`clear: both;` 这种方法是在浮动元素之后添加一个额外的空元素，比如`<div class="clear"></div>`，然后在CSS中设置`.clear...
清除浮动的常用的几种方法
团酱
11-29 367
首先我们要知道为什么要清除浮动？ 如果说一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除（父元素因为子级元素浮动引起的内部高度为0的问题） 首先先写了一个正常的结构是在box没有设置高度的时候，里面是的两个div会默认的撑开，这是在没有设置浮动的时候 <style> .box { width: 800px;
清除浮动方法之一（在家内部修墙，即内墙法）
fuxiaomi2016的博客
10-11 1517
清除浮动方法之一（在家内部修墙）
浮动的本质和4种清除方法
baidu_21349635的专栏
12-03 594
文章目录1.清除浮动本质2.清除浮动的方法1).额外标签法(隔墙法)2).父级添加overflow属性方法3).使用after伪元素清除浮动4).使用双伪元素清除浮动3 清除浮动总结 1.清除浮动本质 听pink老师说清除浮动本质： ​ 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了 2...
清除浮动的四种方法方法
m0_71814235的博客
07-04 152
清除浮动的四种方法方法
CSS四种清除浮动的方法
Jeff169的博客
12-07 1125
浮动能让元素脱标,但是不同区域的标签之间却又会贴边,比如:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <sty
清除浮动(外墙法和内墙法)不常用 不推荐
weixin_42187676的博客
09-21 677
CSS清除浮动的三种方法【前端开发】
最新发布
2401_83817024的博客
03-29 923
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可获取！！！他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可获取！！！[外链图片转存中…(img-xzOyjGg2-1711655681521)]
css清除浮动的四种方式
u014353495的专栏
11-20 139
方式一：隔墙法 <!DOCTYPE html> <html lang="zh-CN"> <head> <style> .div0 { border: 1px solid red; } .div1 { width: 100px; height: 50px; background-color: red;
CSS清除浮动的六种方法
zwj_553的博客
03-22 250
清除浮动的六种方法 布局页面的时候，如果父标签是标准流，而子标签都是浮动流，在父元素没有定义高度的情况下，父元素就会被子元素的浮动挡住，或者说，父元素无法被撑开，这种时候就需要清除浮动。 方法一：隔墙法，通过在最后一个浮动元素后面添加带有clear属性的标签来清除浮动（有些公司会用这种方法） .clear-fix { clear: both; } <div> <div style="float: left"></div> <div style=
XHTML+CSS清除浮动：3种实用方法解析
"这篇文章主要介绍了在XHTML+CSS布局中清除浮动的三种常见方法，包括：空元素法、clearfix类法以及使用overflow属性。这三种方法各有特点，开发者可以根据实际需求选择适合的方式来解决浮动元素导致的父元素高度塌陷...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值