关注互联网应用及运维技术的个人博客

通过使用CSS清除盒子浮动

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


为什么要清除浮动

  • 由于父级盒子很多情况下,不方便给高度,但是盒子浮动又不占用位置,最后父盒子高度为0时,会影响下面的标准流盒子
  • 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响

总结:为什么要清除浮动?

  1. 父级盒子没有指定高度
  2. 子盒子浮动了
  3. 影响下面布局了,我们就该清除浮动了

清除浮动

  • 清除浮动的本质:,清除浮动元素脱离标准流所造成的影响
  • 清除浮动的策略:闭合浮动,只让浮动在盒子内部影响不影响盒子外面的其他盒子
  • 如果父盒子本身有高度,则不需要清除浮动
  • 清除浮动之后,父级就会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响下面的标准流了

语法:

选择器 {clear: 属性值;}

属性值:

  • left:不允许左侧有浮动元素(清除左侧浮动的影响)
  • right:不允许右侧有浮动元素(清除右侧浮动的影响)
  • both:同时清除左右两侧浮动的影响

清除浮动的方法

  • 额外标签法:

也称隔墙法,就是在最后一个子元素的后面添加一个额外标签,额外标签添加清除浮动样式,是W3C推荐的做法

<style>
    .box {
            border: 1px solid blue;
            width: 990px;
            margin: 50px auto;
        }
        .nav {
            float: left;
            width: 240px;
            height: 150px;
            background-color: pink;
        }
        .box2 {
            width: 990px;
            height: 300px;
            background-color: black;
        }
        .clear {
            clear: both;    // 清除浮动
        }
</style>
<body>
    <div class="box">
        <div class="nav"></div>
        <div class="nav"></div>
        <div class="clear"></div>    // 用一个空标签隔开前面的浮动元素
    </div>
    <div class="box2"></div>
</body>

优点:通俗易懂,书写方便

缺点:添加了许多无意义的标签,结构化较差

注意:这个新的空标签必须是块级元素

  • 给父级添加overflow 属性

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

<style>
    .box {
            /* 清除浮动 */
            overflow: hidden;    
            border: 1px solid blue;
            width: 990px;
            margin: 50px auto;
        }
        .nav {
            float: left;
            width: 240px;
            height: 150px;
            background-color: pink;
        }
        .box2 {
            width: 990px;
            height: 300px;
            background-color: black;
        }
</style>
<body>
    <div class="box">
        <div class="nav"></div>
        <div class="nav"></div>
    </div>
    <div class="box2"></div>
</body>

优点:代码简洁

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

  • 给父级添加after 伪元素

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

<style>
    /* 清除浮动 */
    .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

    .box {  
            border: 1px solid blue;
            width: 990px;
            margin: 50px auto;
        }
        .nav {
            float: left;
            width: 240px;
            height: 150px;
            background-color: pink;
        }
        .box2 {
            width: 990px;
            height: 300px;
            background-color: black;
        }
</style>
<body>
    <div class="box clearfix">    // 给父元素添加样式
        <div class="nav"></div>
        <div class="nav"></div>
    </div>
    <div class="box2"></div>
</body>
  • 给父级添加双伪元素
<style>
    /* 清除浮动 */
    .clearfix::before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }

    .box {  
            border: 1px solid blue;
            width: 990px;
            margin: 50px auto;
        }
        .nav {
            float: left;
            width: 240px;
            height: 150px;
            background-color: pink;
        }
        .box2 {
            width: 990px;
            height: 300px;
            background-color: black;
        }
</style>
<body>
    <div class="box clearfix">    // 给父元素添加样式
        <div class="nav"></div>
        <div class="nav"></div>
    </div>
    <div class="box2"></div>
</body>

赞(0)
未经允许不得转载:飞天狒狒 » 通过使用CSS清除盒子浮动

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址