css浮动 BFC(块级格式化上下文)

最新推荐文章于 2021-12-16 11:01:02 发布

saberrrrrrrr

最新推荐文章于 2021-12-16 11:01:02 发布

阅读量143

点赞数

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/saber04/article/details/94655804

版权

前端基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

float:left

设置之后元素可能会浮出容器脱离文档流内容便不会撑开父容器此时需要清除浮动才能恢复

解决方法

1.额外标签法： clear:left、right、both 注:在子元素后添加(不推荐使用)
例<div class=huaweiapp></div>清除浮动在div关闭前加上<div style="clear:both"></div>(并且是在设置浮动的元素后面添加)
或者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    }
    .footer{
        width: 900px;
        height: 100px;
        background: darkslateblue;
    }
    .clear{
        clear:both;
    }
    </style>
</head>
<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer"></div>
</body>
</html>

display:inline-block 此方法不能清除浮动，但能撑开容器
父元素上设置overflow:hidden 它的特殊用法便是清除包含块内子元素的浮动通过触发BFC模式 BFC详解
此方法原是当内容溢出内容区的时候采取修剪内容，其余内容不可见的方法（不推荐使用）
通过伪元素清除（推荐使用）
1. after伪元素

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

使用before和after双伪元素清除浮动

     .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
 
 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

若有错误，请联系博主更改
本文参考
作者：h_qingyi 参考链接

saberrrrrrrr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css浮动 BFC(块级格式化上下文)

float:left设置之后元素可能会浮出容器脱离文档流内容便不会撑开父容器此时需要清除浮动才能恢复解决方法1.额外标签法： clear:left、right、both 注:在子元素后添加(不推荐使用)例<div class=huaweiapp></div>清除浮动在div关闭前加上<div style="clear:both"></...
复制链接

扫一扫