CSS -- 清除浮动的几种常用方法

最新推荐文章于 2023-07-20 17:15:10 发布

LiuszZZ

最新推荐文章于 2023-07-20 17:15:10 发布

阅读量119

点赞数

分类专栏： Java Web 文章标签： css

本文链接：https://blog.csdn.net/qq_39720594/article/details/105916907

版权

Java Web 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

清除浮动

本文总结自，B站-pink老师（鸣谢）

为什么要清除浮动？

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

由于浮动元素不占有原文档流的位置，所以它会对后面的元素排版产生影响。

在这里插入图片描述

清除浮动语法

选择器{clear: 属性值;}

属性及描述：

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

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

清除浮动方法

额外标签法：也称为隔墙法，W3C推荐。
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

1. 额外标签法

注意：添加的必须是块级元素才行！！！

在浮动元素的末尾添加一个空的标签，例如

&lt;div style=&quot;clear:both&quot;&gt;&lt;/div&gt;
或者
&lt;/br&gt;

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

2. 父元素添加overflow

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

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

3. after伪元素

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

.clearfix:after {
        content: &quot;&quot;;
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }

优点：没有增加标签，结构更简单
缺点：需要照顾低版本浏览器
代表网站：百度、淘宝、网易。

4. 双伪元素

给父元素添加样式

.clearfix:before,
      .clearfix:after {
        content: &quot;&quot;;
        display: table;
      }
      .clearfix:after {
        clear: both;
      }

优点：结构更简单
缺点：需要照顾低版本浏览器
代表网站：小米、腾讯。

总结

为什么需要清除浮动？

父级没高度
子盒子浮动了
影响下面布局。

清除浮动方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义标签，结构化较差。
父级overflow:hidden;	书写简单	溢出部分会隐藏，不显示
父级after伪元素	结构语义化正确	IE6-7兼容性问题
父级双伪元素	结构语义化正确	IE6-7兼容性问题

代码演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 4.双伪元素清除浮动 */
      .clearfix:before,
      .clearfix:after {
        content: "";
        display: table;
      }
      .clearfix:after {
        clear: both;
      }
      /* 3. :after伪元素 
      .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }*/
      /* 父级无法看到浮动的子元素，高度坍缩为零 */
      .box {
        width: 800px;
        border: 1px solid blue;
        margin: 0 auto;
        /*overflow: hidden; 2.给父元素添加overflow样式属性来清除浮动*/
      }
      /* 浮动的元素不占有原位置 */
      .damao {
        float: left;
        width: 300px;
        height: 200px;
        background-color: purple;
      }
      .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .footer {
        height: 200px;
        background-color: black;
      }
      /*  1.额外标签法清除浮动
      .clear {
        clear: both;
      } */
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div class="damao">大毛</div>
      <div class="ermao">二毛</div>
      <!-- 额外标签法：在最后一个浮动的盒子后面添加块标签 -->
      <!-- <div class="clear"></div> -->
    </div>
    <div class="footer"></div>
  </body>
</html>

样式：
在这里插入图片描述

LiuszZZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS -- 清除浮动的几种常用方法

清除浮动本文总结自，B站-pink老师（鸣谢）为什么要清除浮动？由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为零时就会影响下面的标准流盒子。由于浮动元素不占有原文档流的位置，所以它会对后面的元素排版产生影响。清除浮动语法选择器{clear: 属性值;}属性及描述：清除浮动的策略是：闭合浮动属性值描述...
复制链接

扫一扫

专栏目录