css如何清除浮动（clear和BFC）

最新推荐文章于 2022-10-29 23:53:26 发布

xiaoqingpang

最新推荐文章于 2022-10-29 23:53:26 发布

阅读量433

点赞数

分类专栏： css 文章标签： css float clear

本文链接：https://blog.csdn.net/xiaoqingpang/article/details/78910440

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

清除浮动两种思路：

1.利用clear属性清除浮动

2.使父容器形成BFC(Block Formatting Contexts块级格式化上下文)

利用clear属性清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
        .box{
            width:600px;
            border:1px solid #333;
        }
        .same{
            width:100px;
            height:100px;
            background-color:deeppink;
            float: left;
            margin:20px;
        }
        .clear{
            /*clear:left;*/
            clear:both;
        }
        .left{

        }
        .cont{
            /*clear:both;*/
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left same">左侧盒子</div>
        <div class="cont same">中间盒子</div>
        <div class="right same">右侧盒子</div>
        <div class="clear"></div>
    </div>
</body>
</html>

使用css插入元素

<div class="p floatfix">
    <div class="aa same"></div>
    <div class="bb same"></div>
    <div class="cc same"></div>
</div>

.floatfix:after{
    content:'.';
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}

父元素添加一个不可见的块元素。

.floatfix:after{
    content:'.';
    display:table;
    clear:both;
}

IE6，IE7不支持伪类元素，需要使用BFC

使父元素形成BFC

父容器形成BFC：

float为left、right

overflow为hidden、auto、scroll

display为table-cell、table-caption、inlineblock

position为absolute、fixed

<div class="bfc box">
    <div class="same">1</div>
    <div class="same">2</div>
    <div class="same">2</div>
</div>

.same{
    width:100px;
    height:100px;
    background-color:deeppink;
    float: left;
    margin:20px;
}
.bfc{
    /*float:left;*/
    overflow: hidden;
}

一个相对靠谱的解决方案

在IE+、现代浏览器上使用伪元素

在IE6、7使用hasLayout

.floatfix{
    *zoom:1;
}
.floatfix:after{
    content:'.';
    display:table;
    clear:both;
}

参考：https://www.cnblogs.com/dolphinX/p/3508869.html

xiaoqingpang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css如何清除浮动（clear和BFC）

清除浮动两种思路：1.利用clear属性清除浮动2.使父容器形成BFC(Block Formatting Contexts块级格式化上下文)利用clear属性清除浮动``swifthtml>lang="en"> charset="UTF-8"> 清除浮动 type="text/css"> .box{
复制链接

扫一扫