CSS3 清除浮动复习

最新推荐文章于 2023-02-13 17:36:56 发布

magician21##

最新推荐文章于 2023-02-13 17:36:56 发布

阅读量113

点赞数

分类专栏： CSS3合集文章标签： css3 css javascript

本文链接：https://blog.csdn.net/weixin_48927774/article/details/120793918

版权

CSS3合集专栏收录该内容

12 篇文章 0 订阅

订阅专栏

为什么要清除浮动?

父盒子在很多情况下不方便给高度，子盒子浮动又不占有位置，最后父盒子高度为0，会影响下边的标准流盒子。

清除浮动的方法

额外标签法(隔墙法，但平时不常用) W3C推荐
父级添加overflow属性
父级添加after伪元素
给父级添加双伪元素

额外标签法

在最后一个浮动元素后边添加一个额外标签，添加清除浮动样式。

<style>
    .nav {
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
    .clear {
        clear: both;
    }
</style>
<body>
    <div>
        <div class="nav"></div>
        <div class="nav"></div>
        <div class="clear"></div>
    </div>
    
</body>

缺点：添加许多无意义的标签，结构性较差

给父级添加overflow

缺点：无法显示溢出的部分

after伪元素法

.clearfix:after {
    content: "";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /* I6,I7专有 */
    *zoom: 1;
}

使用：在父元素上添加这个属性
例<div class="nav clearfix">...</div>

双伪元素清除浮动 (最常使用)

.clearfix:before,.clearfix:after {
      content:"";
      display:table;
      /* 如果写display:block的话两个块元素就会分行显示，影响父盒子大小 */
      /* table是表格，转化成块级元素并同行显示 */
    }
    .clearfix:after {
     clear:both;
    }
    .clearfix {
      *zoom:1;
    }

使用方法和伪元素法一样，在父元素上加上这个属性

magician21##

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 清除浮动复习

为什么要清除浮动?父盒子在很多情况下不方便给高度，子盒子浮动又不占有位置，最后父盒子高度为0，会影响下边的标准流盒子。清除浮动的方法额外标签法(隔墙法，但平时不常用) W3C推荐父级添加overflow属性父级添加after伪元素给父级添加双伪元素额外标签法在最后一个浮动元素后边添加一个额外标签，添加清除浮动样式。<style> .nav { width: 100px; height: 100px; backgroun
复制链接

扫一扫

专栏目录